建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要為大家展示了“HTML5 Canvas如何實(shí)現(xiàn)顏色填充”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5 Canvas如何實(shí)現(xiàn)顏色填充”這篇文章吧。
創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站與策劃設(shè)計(jì),寧國(guó)網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:寧國(guó)等地區(qū)。寧國(guó)做網(wǎng)站價(jià)格咨詢:13518219792
到目前為止，我們只看到過(guò)繪制內(nèi)容的方法。如果我們想要給圖形上色，有兩個(gè)重要的屬性可以做到：fillStyle 和 strokeStyle。
fillStyle = color
strokeStyle = color
strokeStyle 是用于設(shè)置圖形輪廓的顏色，而 fillStyle 用于設(shè)置填充顏色。color 可以是表示 CSS 顏色值的字符串，漸變對(duì)象或者圖案對(duì)象。默認(rèn)情況下，線條和填充顏色都是黑色(CSS 顏色值 #000000)。
下面的例子都表示同一種顏色。
// 這些 fillStyle 的值均為 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
注意: 目前 Gecko 引擎并沒(méi)有提供對(duì)所有的 CSS 3 顏色值的支持。例如，hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。
注意: 一旦您設(shè)置了 strokeStyle 或者 fillStyle 的值，那么這個(gè)新值就會(huì)成為新繪制的圖形的默認(rèn)值。如果你要給每個(gè)圖形上不同的顏色，你需要重新設(shè)置 fillStyle 或 strokeStyle 的值。
Canvas填充樣式fillStyle
說(shuō)明
在本示例里，我會(huì)再度用兩層 for 循環(huán)來(lái)繪制方格陣列，每個(gè)方格不同的顏色。結(jié)果如右圖，但實(shí)現(xiàn)所用的代碼卻沒(méi)那么絢麗。我用了兩個(gè)變量 i 和 j 來(lái)為每一個(gè)方格產(chǎn)生唯一的 RGB 色彩值，其中僅修改紅色和綠色通道的值，而保持藍(lán)色通道的值不變。你可以通過(guò)修改這些顏色通道的值來(lái)產(chǎn)生各種各樣的色板。通過(guò)增加漸變的頻率，你還可以繪制出類似 Photoshop 里面的那樣的調(diào)色板。
代碼
====================================================
效果
透明度 Transparency
除了可以繪制實(shí)色圖形，我們還可以用 canvas 來(lái)繪制半透明的圖形。通過(guò)設(shè)置 globalAlpha 屬性或者使用一個(gè)半透明顏色作為輪廓或填充的樣式。
globalAlpha = transparency value
globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時(shí)候相當(dāng)高效。不過(guò)，我認(rèn)為下面的方法可操作性更強(qiáng)一點(diǎn)。
因?yàn)?strokeStyle 和 fillStyle 屬性接受符合 CSS 3 規(guī)范的顏色值，那我們可以用下面的寫法來(lái)設(shè)置具有透明度的顏色。
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";
rgba() 方法與 rgb() 方法類似，就多了一個(gè)用于設(shè)置色彩透明度的參數(shù)。它的有效范圍是從 0.0（完全透明）到 1.0（完全不透明）。
Canvas 透明度globalAlpha
說(shuō)明
在這個(gè)例子里，我用四色格作為背景，設(shè)置 globalAlpha 為 0.2后，在上面畫一系列半徑遞增的半透明圓。最終結(jié)果是一個(gè)徑向漸變效果。圓疊加得越更多，原先所畫的圓的透明度會(huì)越低。通過(guò)增加循環(huán)次數(shù)，畫更多的圓，背景圖的中心部分會(huì)完全消失。
注意:
這個(gè)例子在 Firefox 1.5 beta 1 里是行不通的。你需要 nightly branch build 或者等待新版本發(fā)布來(lái)實(shí)踐這個(gè)效果。
這個(gè)例子在 Safari 下可能由于顏色值無(wú)效而達(dá)不到效果。例子里是 '#09F' 是不符合規(guī)范要求的，不過(guò) Firefox 是認(rèn)識(shí)這種格式的。
代碼
====================================================
以上是“HTML5 Canvas如何實(shí)現(xiàn)顏色填充”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前題目：HTML5Canvas如何實(shí)現(xiàn)顏色填充
鏈接地址：http://www.dlmjj.cn/article/giihde.html
