HTML5中Canvas繪制時指定顏色與透明度的方法有哪些

小編給大家分享一下HTML5中Canvas繪制時指定顏色與透明度的方法有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、富川網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5頁面制作、商城網(wǎng)站制作、集團公司官網(wǎng)建設、外貿(mào)網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為富川等各大城市提供網(wǎng)站開發(fā)制作服務。

指定顏色

黑色是Canvas繪制的默認色彩，要想換一種顏色的話，就得在實際畫之前指定顏色。

JavaScript Code復制內(nèi)容到剪貼板

ctx.strokeStyle = color

指定繪制線的顏色：

JavaScript Code復制內(nèi)容到剪貼板

ctx.fillStyle = color

指定填充的顏色：

來看看實際的例子：

JavaScript

JavaScript Code復制內(nèi)容到剪貼板

onload = function() {

draw();

};

function draw() {

var canvas = document.getElementById('c1');

if ( ! canvas || ! canvas.getContext ) { return false; }

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.fillStyle = 'rgb(192, 80, 77)'; // 紅

ctx.arc(70, 45, 35, 0, Math.PI*2, false);

ctx.fill();

ctx.beginPath();

ctx.fillStyle = 'rgb(155, 187, 89)'; // 綠

ctx.arc(45, 95, 35, 0, Math.PI*2, false);

ctx.fill();

ctx.beginPath();

ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫

ctx.arc(95, 95, 35, 0, Math.PI*2, false);

ctx.fill();

}

效果如下圖：

指定透明度

和普通的CSS中一樣，我們指定顏色的時候還可以帶一個alpha值（不過用的不多，IE9之前都不支持）?？创a：

JavaScript

JavaScript Code復制內(nèi)容到剪貼板

onload = function() {

draw();

};

function draw() {

var canvas = document.getElementById('c1');

if ( ! canvas || ! canvas.getContext ) { return false; }

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; //

ctx.arc(70, 45, 35, 0, Math.PI*2, false);

ctx.fill();

ctx.beginPath();

ctx.fillStyle = 'rgba(155, 187, 89, 0.7)'; //

ctx.arc(45, 95, 35, 0, Math.PI*2, false);

ctx.fill();

ctx.beginPath();

ctx.fillStyle = 'rgba(128, 100, 162, 0.7)'; //

ctx.arc(95, 95, 35, 0, Math.PI*2, false);

ctx.fill();

}

結(jié)果就是下面這樣：

和上面的代碼基本沒變化，就是把rgb(r, g, b)變成了rgba(r, g, b, a)而已，a的值也是0~1，0表示完全透明，1則是完全不透明（所以alpha的值實際上是“不透明度”）。

全局透明globalAlpha

這個也是很簡單的一個屬性，默認值為1.0，代表完全不透明，取值范圍是0.0（完全透明）~1.0。這個屬性與陰影設置是一樣的，如果不想針對全局設置不透明度，就得在下次繪制前重置globalAlpha。

總結(jié)一下：基于狀態(tài)的屬性有哪些？

——globalAlpha

——globalCompositeOpeartion

——strokeStyle

——textAlign,textBaseline

——lineCap,lineJoin,lineWidth,miterLimit

——fillStyle

——font

——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY

我們通過一個代碼，來體驗一下globalAlpha的神奇之處~

JavaScript Code復制內(nèi)容到剪貼板

<!DOCTYPE html>

<head>

<style>

body { background: url("./images/bg3.jpg") repeat; }

#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }

</style>

</head>

<body>

你的瀏覽器居然不支持Canvas？！趕快換一個吧！！

</canvas>

</div>

window.onload = function(){

var canvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.fillStyle = "#FFF";

context.fillRect(0,0,800,600);

context.globalAlpha = 0.5;

for(var i=0; i<=50; i++){

var R = Math.floor(Math.random() * 255);

var G = Math.floor(Math.random() * 255);

var B = Math.floor(Math.random() * 255);

context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";

context.beginPath();

context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);

context.fill();

}

};

</script>

</body>

</html>

以上是“HTML5中Canvas繪制時指定顏色與透明度的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標題名稱：HTML5中Canvas繪制時指定顏色與透明度的方法有哪些
網(wǎng)頁路徑：http://muchs.cn/article12/jpecgc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、自適應網(wǎng)站、用戶體驗、搜索引擎優(yōu)化、域名注冊、云服務器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容