欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5Canvas如何實(shí)現(xiàn)顏色填充

這篇文章主要為大家展示了“HTML5 Canvas如何實(shí)現(xiàn)顏色填充”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5 Canvas如何實(shí)現(xiàn)顏色填充”這篇文章吧。

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站與策劃設(shè)計(jì),寧國網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:寧國等地區(qū)。寧國做網(wǎng)站價(jià)格咨詢:13518219792

到目前為止，我們只看到過繪制內(nèi)容的方法。如果我們想要給圖形上色，有兩個(gè)重要的屬性可以做到：fillStyle 和 strokeStyle。

fillStyle = color

strokeStyle = color

strokeStyle 是用于設(shè)置圖形輪廓的顏色，而 fillStyle 用于設(shè)置填充顏色。color 可以是表示 CSS 顏色值的字符串，漸變對象或者圖案對象。默認(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 引擎并沒有提供對所有的 CSS 3 顏色值的支持。例如，hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。

注意: 一旦您設(shè)置了 strokeStyle 或者 fillStyle 的值，那么這個(gè)新值就會成為新繪制的圖形的默認(rèn)值。如果你要給每個(gè)圖形上不同的顏色，你需要重新設(shè)置 fillStyle 或 strokeStyle 的值。

Canvas填充樣式fillStyle

說明

在本示例里，我會再度用兩層 for 循環(huán)來繪制方格陣列，每個(gè)方格不同的顏色。結(jié)果如右圖，但實(shí)現(xiàn)所用的代碼卻沒那么絢麗。我用了兩個(gè)變量 i 和 j 來為每一個(gè)方格產(chǎn)生唯一的 RGB 色彩值，其中僅修改紅色和綠色通道的值，而保持藍(lán)色通道的值不變。你可以通過修改這些顏色通道的值來產(chǎn)生各種各樣的色板。通過增加漸變的頻率，你還可以繪制出類似 Photoshop 里面的那樣的調(diào)色板。

代碼

<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 案例

說明

這個(gè)示例與上面的有點(diǎn)類似，但這次用到的是 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

除了可以繪制實(shí)色圖形，我們還可以用 canvas 來繪制半透明的圖形。通過設(shè)置 globalAlpha 屬性或者使用一個(gè)半透明顏色作為輪廓或填充的樣式。

globalAlpha = transparency value

globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時(shí)候相當(dāng)高效。不過，我認(rèn)為下面的方法可操作性更強(qiáng)一點(diǎn)。

因?yàn)?strokeStyle 和 fillStyle 屬性接受符合 CSS 3 規(guī)范的顏色值，那我們可以用下面的寫法來設(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

說明

在這個(gè)例子里，我用四色格作為背景，設(shè)置 globalAlpha 為 0.2后，在上面畫一系列半徑遞增的半透明圓。最終結(jié)果是一個(gè)徑向漸變效果。圓疊加得越更多，原先所畫的圓的透明度會越低。通過增加循環(huán)次數(shù)，畫更多的圓，背景圖的中心部分會完全消失。

注意:

這個(gè)例子在 Firefox 1.5 beta 1 里是行不通的。你需要 nightly branch build 或者等待新版本發(fā)布來實(shí)踐這個(gè)效果。

這個(gè)例子在 Safari 下可能由于顏色值無效而達(dá)不到效果。例子里是 '#09F' 是不符合規(guī)范要求的，不過 Firefox 是認(rèn)識這種格式的。

代碼

====================================================

<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如何實(shí)現(xiàn)顏色填充”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：HTML5Canvas如何實(shí)現(xiàn)顏色填充
標(biāo)題網(wǎng)址：http://chinadenli.net/article14/giihde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、小程序開發(fā)、微信小程序、定制開發(fā)、定制網(wǎng)站、App開發(fā)

廣告

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

小程序開發(fā)