<html>
<head>
<title>绘制矩形的三个函数</title>
<script type="application/x-javascript">
function drawShape(){
//利用DOM得到canvas元素
var canvas = document.getElementById("myCanvas");
//判定浏览器对Canvas的支持与否
if (canvas.getContext){
var cxt = canvas.getContext("2d");
cxt.fillStyle="#FF0055";
cxt.fillRect(25,25,100,100);//绘制一个填充的矩形
cxt.clearRect(45,45,60,60);//清除指定矩形区域，并使其完全透明
cxt.strokeStyle="#0000FF";
cxt.strokeRect(55,55,40,40);//绘制一个矩形轮廓
}
}
</script>
</head>
<body onLoad="drawShape()">
<canvas id="myCanvas" height="150" width="150" style="border:#06F solid 2px;"></canvas>
</body>
</html>
效果图如下：
【实例展示了三个绘制矩形的函数。分别是：fillRect(x,y,width,height) :绘制一个填充的矩。clearRect(x,y,width,height) : 清除指定的矩形区域，并使其完全明。strokeRect(x,y,width,height) : 绘制一个矩形轮廓。函数参数x、y代表矩形左上角的坐标，width、height代表矩形的宽和高。】