<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById("canvas");
if(canvas.getContext) {
var cxt = canvas.getContext("2d");
cxt.fillStyle = "rgb(200,0,0)";
cxt.fillRect(10,10,55,50);
cxt.fillStyle = "rgba(0,0,200,0.5)";
cxt.fillRect(30,30,55,50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
效果图如下：
【实例绘制两个部分重叠交错的矩形，其中一个是有alpha透明效果。】