溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“HTML5 Canvas如何實現顏色填充”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“HTML5 Canvas如何實現顏色填充”這篇文章吧。
到目前為止，我們只看到過繪制內容的方法。如果我們想要給圖形上色，有兩個重要的屬性可以做到：fillStyle 和 strokeStyle。
fillStyle = color
strokeStyle = color
strokeStyle 是用于設置圖形輪廓的顏色，而 fillStyle 用于設置填充顏色。color 可以是表示 CSS 顏色值的字符串，漸變對象或者圖案對象。默認情況下，線條和填充顏色都是黑色(CSS 顏色值 #000000)。
下面的例子都表示同一種顏色。
// 這些 fillStyle 的值均為 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
注意: 目前 Gecko 引擎并沒有提供對所有的 CSS 3 顏色值的支持。例如，hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。
注意: 一旦您設置了 strokeStyle 或者 fillStyle 的值，那么這個新值就會成為新繪制的圖形的默認值。如果你要給每個圖形上不同的顏色，你需要重新設置 fillStyle 或 strokeStyle 的值。
Canvas填充樣式fillStyle
說明
在本示例里，我會再度用兩層 for 循環來繪制方格陣列，每個方格不同的顏色。結果如右圖，但實現所用的代碼卻沒那么絢麗。我用了兩個變量 i 和 j 來為每一個方格產生唯一的 RGB 色彩值，其中僅修改紅色和綠色通道的值，而保持藍色通道的值不變。你可以通過修改這些顏色通道的值來產生各種各樣的色板。通過增加漸變的頻率，你還可以繪制出類似 Photoshop 里面的那樣的調色板。
代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}
script>
<title>測試fillStyletitle>
head>
<body onload="draw();" >
<canvas id="canvas" width="400" height="300">
</canvas>
body>
html>
效果
Canvas strokeStyle 案例
說明
這個示例與上面的有點類似，但這次用到的是 strokeStyle 屬性，而且畫的不是方格，而是用 arc 方法來畫圓。
代碼
====================================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
}
</script>
<title>測試strokeStyle</title>
</head>
<body onload="draw();" >
<canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>
====================================================
效果
透明度 Transparency
除了可以繪制實色圖形，我們還可以用 canvas 來繪制半透明的圖形。通過設置 globalAlpha 屬性或者使用一個半透明顏色作為輪廓或填充的樣式。
globalAlpha = transparency value
globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時候相當高效。不過，我認為下面的方法可操作性更強一點。
因為 strokeStyle 和 fillStyle 屬性接受符合 CSS 3 規范的顏色值，那我們可以用下面的寫法來設置具有透明度的顏色。
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";
rgba() 方法與 rgb() 方法類似，就多了一個用于設置色彩透明度的參數。它的有效范圍是從 0.0（完全透明）到 1.0（完全不透明）。
Canvas 透明度globalAlpha
說明
在這個例子里，我用四色格作為背景，設置 globalAlpha 為 0.2后，在上面畫一系列半徑遞增的半透明圓。最終結果是一個徑向漸變效果。圓疊加得越更多，原先所畫的圓的透明度會越低。通過增加循環次數，畫更多的圓，背景圖的中心部分會完全消失。
注意:
這個例子在 Firefox 1.5 beta 1 里是行不通的。你需要 nightly branch build 或者等待新版本發布來實踐這個效果。
這個例子在 Safari 下可能由于顏色值無效而達不到效果。例子里是 '#09F' 是不符合規范要求的，不過 Firefox 是認識這種格式的。
代碼
====================================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// draw background
ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,150,150);
ctx.fillStyle = '#FFF';
ctx.globalAlpha = 0.2;
// Draw semi transparent circles
for (var i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
}
}
</script>
<title>測試strokeStyle</title>
</head>
<body onload="draw();" >
<canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>
以上是“HTML5 Canvas如何實現顏色填充”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
