canvas绘制时的颜色与透明度

一 指定css样式颜色和透明度的方式

1 #ffffff(白色)  用16进制表示

2 rgb(red/green/blue,红/绿/蓝)

从表中我们可以得到规律：颜色的HEX到rgb的转换，例如aqua值是#00FFFF,00-->0,FF-->255(FF=15*16+15*1)

3 rgba(red/green/blue/alpha,红/绿/蓝/透明度)

  透明度的值是从0到1,0是全透明，1是完全不透明

4 hls(hue/saturation/lightness,色相/饱和度/亮度)

  css3的规范中增加了hsl的支持，主要是rgb存在着两个缺陷，硬件为先导和不直观

具体相关信息可以查阅http://www.w3.org/TR/css3-color/ 下的hsl example

5 hls(hue/saturation/lightnes/alpha,色相/饱和度/亮度/透明度)

二：示例：

js代码如下

var canvas = document.getElementById('canvas2');
context = canvas.getContext('2d');

context.font ='20px Arisal';
context.fillText('隐藏部分，透明部分',150,150);
context.lineWidth =20;
context.strokeStyle = 'blue';
context.strokeRect(100,100,100,100);
context.fillStyle = 'rgba(0,0,255,0.3)';
context.fillRect(220,80,140,140);

结果如图