html5canvas标签绘制矩形

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>

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】