詳解HTML5 Canvas繪製時指定顏色與透明度的方法_html5教學技巧

指定顏色

黑色是Canvas繪製的預設色彩，要換一種顏色的話，就得在實際畫之前指定顏色。

JavaScript Code複製內容到剪貼簿

1. ctx.strokeStyle = color   

指定繪製線的顏色：

JavaScript Code複製內容到剪貼簿

1. ctx.fillStyle = color   

指定填滿的顏色：
來看看實際的例子：

JavaScript

JavaScript Code複製內容到剪貼簿

1. onload = function() {   
2.   draw();   
3. };   
4. function draw() {   
5.   var canvas = document.getElementById('c1'
  
6. if ( ! canvas || ! canvas.getContext ) {  ; }      var
 ctx = canvas.getContext(
7. '2d'   ctx.beginPath();      ctx.fillStyle = 
8. 'rgb(192, 80, 77)'
9.   ctx.arc(70, 45, 35, 0, Math.PI*2, false);   );   
10.   ctx.fill();      ctx.beginPath();   
11.   ctx.fillStyle = 'rgb(155, 187, 89)'
  ctx.arc(45, 95, 35, 0, Math.PI*2, 
13. false);   );      ctx.fill();   
14.   ctx.beginPath();      ctx.fillStyle = 
15. 'rgb(128, 100, 162)'; >
16.   ctx.arc(95, 95, 35, 0, Math.PI*2, false
17. );   );      ctx.fill();   
}  
18. 效果如下圖：
19. 指定透明度
20. 和普通的CSS中一樣，我們指定顏色的時候還可以帶一個alpha值（不過用的不多，IE9之前都不支援）。看代碼：
JavaScript

JavaScript Code
複製內容到剪貼簿

1. onload = 函數() {   
2.   較差（）；   
3. }；   
4. 函數 draw() {   
5.   var canvas = document.getElementById('c1');   
6.   if ( ! canvas || ! canvas.getContext ) {  ； }      
7. var ctx = canvas.getContext('2d');      ctx.beginPath();   
8.   ctx.fillStyle = 
9. 'rgba(192, 80, 77, 0.7)'; //      ctx.arc(70, 45, 35, 0, Math.PI*2, 
10. false);      ctx.fill();   
11.   ctx.beginPath();   
12.   ctx.fillStyle = 
13. 'rgba(155, 187, 89, 0.7)'; //      ctx.arc(45, 95, 35, 0, Math.PI*2, 
14. false);      ctx.fill();   
15.   ctx.beginPath();   
16.   ctx.fillStyle = 
17. 'rgba(128, 100, 162, 0.7)'; //      ctx.arc(95, 95, 35, 0, Math.PI*2, 
18. false);      ctx.fill();   
19. }   

結果就是下面這樣：

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

全域透明globalAlpha

這也是很簡單的屬性，預設值為1.0，代表完全不透明，取值範圍是0.0（完全透明）~1.0。陰影設定是一樣的，如果不想針對全域設定不透明度，就得在接下來的情況前重置globalAlpha。
總結一下：基於狀態的屬性有哪些？ ——globalAlpha
——全域複合操作

——筆劃樣式

——文字視覺，文字軸線

——lineCap,lineJoin,lineWidth,miterLimit

——fillStyle

——字體

——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY

我們透過一個程式碼，來體驗一下globalAlpha的神奇之處~

JavaScript 程式碼

將內容複製到剪切板

1. nbsp;html>   
2. "zh">   
3.   
4.      "UTF-8">   
5.        
6.     
7.         body { background: url("./images/bg3.jpg") repeat; }  
8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
9.        
10.   
11.   
12. "canvas-warp">   
13.     "canvas">   
14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
15.        

  

  

  

    window.onload = 函數(){   

        var canvas = document.getElementById("   

        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 🎜>var 🎜>var

 i=0; >             var R = Math.floor(Math.random() * 25);   

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

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

  

            con.fillStyle = "rgb("      " ,"   B   ")";      

            context.beginPath();   

            con.arc(Math.random() * canvas.width, Math.random() * canvas.height,m.width, Math.random()    

            context.fill();   

        }   

    }；   

腳本>   

  

  

運行結果：