<!DOCTYPE HTML>
<html>
<head>
<title>globalAlpha</title>
<script type="text/javascript">
function draw() {
var cxt = document.getElementById("myCanvas").getContext("2d");
cxt.fillStyle="#FD0";
cxt.fillRect(0,0,75,75);
cxt.fillStyle="#6C0"
cxt.fillRect(75,0,75,75);
cxt.fillStyle="#09F";
cxt.fillRect(0,75,75,75);
cxt.fillStyle="#F30";
cxt.fillRect(75,75,75,75);
cxt.fillStyle="#FFF";
cxt.globalAlpha=0.2;
for (i=0; i<7; i++)
{
cxt.beginPath();
cxt.arc(75,75,10+10*i,0,Math.PI*2,true);
cxt.fill();
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" width="150" height="150" style="border:2px solid #f6f;"></canvas>
</body>
</html>
显示效果如下：
【通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。】