Detailed explanation of how to specify color and transparency when drawing HTML5 Canvas_html5 tutorial skills

Specify color

Black is the default color for Canvas drawing. If you want to change it to another color, you have to specify the color before actually drawing.

JavaScript CodeCopy content to clipboard

1. ctx.strokeStyle = color

Specify the color of the drawn line:

JavaScript CodeCopy content to clipboard

1. ctx.fillStyle = color

Specify the color of the fill:
Let’s see a practical example:

JavaScript

JavaScript CodeCopy content to clipboard

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

The effect is as follows:

Specify transparency

Just like in ordinary CSS, we can also bring an alpha value when specifying the color (but it is not used much, and it was not supported before IE9). Look at the code:

JavaScript

JavaScript CodeCopy content to clipboard

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

结果就是下面这样：

和上面的代码基本没变化，就是把rgb(r, g, b)变成了rgba(r, g, b, a)而已，a的值也是0~1，0表示完全透明，1则是完全不透明（所以alpha的值实际上是“不透明度”）。

全局透明globalAlpha
这个也是很简单的一个属性，默认值为1.0，代表完全不透明，取值范围是0.0（完全透明）~1.0。这个属性与阴影设置是一样的，如果不想针对全局设置不透明度，就得在下次绘制前重置globalAlpha。

总结一下：基于状态的属性有哪些？

——globalAlpha

——globalCompositeOpeartion

——strokeStyle

——textAlign,textBaseline

——lineCap,lineJoin,lineWidth,miterLimit

——fillStyle

——font

——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY
我们通过一个代码，来体验一下globalAlpha的神奇之处~

JavaScript Code复制内容到剪贴板

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

<script>   </span></li> <li class="alt"> <span>    window.onload = </span><span class="keyword">function</span><span>(){   </span> </li> <li> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li class="alt"><span>        canvas.width = 800;   </span></li> <li><span>        canvas.height = 600;   </span></li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li> <span>        context.fillStyle = </span><span class="string">"#FFF"</span><span>;   </span> </li> <li class="alt"><span>        context.fillRect(0,0,800,600);   </span></li> <li><span>  </span></li> <li class="alt"><span>        context.globalAlpha = 0.5;   </span></li> <li><span>  </span></li> <li class="alt"> <span>        </span><span class="keyword">for</span><span>(</span><span class="keyword">var</span><span> i=0; i<=50; i ){   </span></li> <li><span>            </span><span class="keyword">var</span><span> R = Math.floor(Math.random() * 255);   </span></li> <li class="alt"><span>            </span><span class="keyword">var</span><span> G = Math.floor(Math.random() * 255);   </span></li> <li><span>            </span><span class="keyword">var</span><span> B = Math.floor(Math.random() * 255);   </span></li> <li class="alt"><span>  </span></li> <li><span>            context.fillStyle = </span><span class="string">"rgb("</span><span>   R   </span><span class="string">","</span><span>   G   </span><span class="string">","</span><span>   B   </span><span class="string">")"</span><span>;   </span></li> <li class="alt"><span>  </span></li> <li><span>            context.beginPath();   </span></li> <li class="alt"><span>            context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);   </span></li> <li><span>            context.fill();   </span></li> <li class="alt"><span>        }   </span></li> <li><span>    };   </span></li> <li class="alt"><span></script>   

  

  

运行结果：

是不是非常的酷？终于有点艺术家的范儿了吧。