设置Canvas矢量图形的透明度

项目需要对Canvas画的矢量图形（主要是面）进行色彩的填充和设置透明度。

原来想到的是对Canvas对象进行样式设置：

filter:alpha(opacity=80);opacity:0.8;

在firefox下看来效果不错。转到IE上就没有效果了。

于是当下想到的是IE对自定义的标签的样式渲染上有问题。在这个前提下google得到的资料都麻烦的很，命名空间之类的东西，只是加个透明度而已没必要这么麻烦。

根据需要实现的效果来想就是去找Canvas中是不是已经由现成的方法来定义矢量图形的透明度了。

突然看到一个例子提到：
ctx.fillStyle = “rgba(r,g,b,a)“;//可以实现填充色的透明效果。
 
于是解决了：
 

var hex = ”#000000”,opacity = 0.8;
ctx.fillStyle = brgba(hex, opacity);
function brgba(hex, opacity) {
    if( ! /#?\d+/g.test(hex) ) return hex; //如果是“red”格式的颜色值，则不转换。//正则错误，参考后面的PS内容
    var h = hex.charAt(0) == "#" ? hex.substring(1) : hex,
        r = parseInt(h.substring(0,2),16),
        g = parseInt(h.substring(2,4),16),
        b = parseInt(h.substring(4,6),16),
        a = opacity;
    return "rgba(" + r + "," + g + "," + b + "," + a + ")";
}

PS：汗，正则大错特错没注意到。。。

如果参数确认是有“#”符号的，干脆直接hex.indexOf("#")  == -1做判断好了。

用正则判断应该挺麻烦的，因为“abcdef”也是可用的值啊。。。

　　——于2010-04-22