function draw(){ var dObj = document.getElementById("tubar"); var cObj = dObj.getContext("2d"); cObj.fillStyle = "rgba(200,0,0,0.5)" cObj.fillRect(30,30,100,100); cObj.strokeRect(45,45,70,70); cObj.clearRect(50,50,60,60); }
<body onLoad="draw();">
<canvas id="canvas" width="150" height="150"></canvas><br>
</body>
cObj.fillStyle = "rgba(200,0,0,0.5)" ：定义这个canvas对象的颜色和透明度;
cObj.fillRect(30,30,100,100):绘制一个矩形，
坐标置值相对于canvas的左上原点，X轴移动30PX,Y轴移动30PX;height设置100px;width设置100px;
cObj.strokeRect(45,45,70,70):绘制一个矩形线框（里面空心的），
坐标置值相对于canvas的左上原点，X轴移动45PX,Y轴移动45PX;height设置100px;width设置100px;
cObj.clearRect(50,50,60,60); 绘制一个矩形，将cObj.fillRect的矩形的一个地方“挖空”;
坐标置值相对于canvas的左上原点，X轴移动50PX,Y轴移动50PX;height设置100px;width设置100px;
如下图：红色为矩形，黑色为线框，白色为“挖空”
白色“挖空”和黑色线框，定位在红色的水平垂直居中的公式：
横坐标=（外矩形的宽-居中元素的宽）/2 + 外矩形的横坐标
【上例：黑色线框横坐标：45 = （100-70）/2+30】
纵坐标=（外矩形的高-居中元素的高）/2 + 外矩形的纵坐标
【上例：黑色线框纵坐标：45 = （100-70）/2+30】