Canvas globalAlpha透明度属性(转)

<!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>

 

显示效果如下:

Canvas globalAlpha透明度属性(转)_第1张图片

 

通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。】

转自:http://www.cnblogs.com/naokr/archive/2012/02/12/2348407.html

你可能感兴趣的:(JavaScript,canvas,透明)