<!DOCTYPE html>
<html>
<head>
<title>透明</title>
<script type="text/javascript">
window.onload=function (){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//绘制矩形
context.beginPath();
context.rect(150,30,130,130);
context.fillStyle="blue";
context.fill();
//绘制半透明圆
context.save();
context.globalAlpha=0.5;
context.beginPath();
context.arc(canvas.width/2,canvas.height/2,70,0,2*Math.PI,false);
context.fillStyle="red";
context.fill();
context.restore();
//绘制矩形
context.beginPath();
context.rect(canvas.width-(150+130),canvas.height-(30+130),130,130);
context.fillStyle="green";
context.fill();
}
</script>
</head>
<body style="margin:100px 10px;">
<canvas id="myCanvas" height="250" width="600" style="border:2px solid #06f;"></canvas>
</body>
</html>
显示效果如下：
实例来自网络。传送门：http://demo.cnmsdn.com/demo48.html