Canvas rgba() 透明度属性【每日一段代码17】
<!DOCTYPE HTML>
<html>
<head>
<title>rgba</title>
<script type="text/javascript">
function draw() {
var cxt=document.getElementById("myCanvas").getContext("2d");
cxt.fillStyle="rgb(255,211,0)";
cxt.fillRect(0,0,150,37.5);
cxt.fillStyle="rgb(102,204,0)";
cxt.fillRect(0,37.5,150,37.5);
cxt.fillStyle="rgb(0,153,255)";
cxt.fillRect(0,75,150,37.5);
cxt.fillStyle="rgb(255,51,0)"
cxt.fillRect(0,112.5,150,37.5);
for (i=0; i<10; i++)
{
cxt.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
for (j=0; j<4; j++)
{
cxt.fillRect(5+i*14,5+j*37.5,14,27.5);
}
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" width="160" height="160" style="border:2px solid #06f;"></canvas>
</body>
</html>
【rgba() 方法与 rgb() 方法类似，多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。相对于 globalAlpha ，rgba() 可以分别设置轮廓和填充样式，因而具有更好的可操作性和使用弹性。】
