参考

使用canvas来绘制图形

知识点

不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径

绘制矩形的方法

绘制填充的矩形

fillRect(x, y, width, height);

绘制一个矩形的边框

strokeRect(x,y,width,height);

清除指定矩形区域，让清除部分完全透明

clearRect(x,y,width,height);

参数说明：

x：绘制图形左上角（起点）的横坐标；
y：绘制图形左上角（起点）的纵坐标；
width：绘制图形的宽；
height：绘制图形的高；

案例

window.onload = function() {
    draw();
}

function draw() {
    var canvas = document.getElementById('canvas1');
    if (canvas.getContext) {
        var oContext = canvas.getContext('2d');
        // 绘制一个尺寸是200px*200px的矩形
        oContext.fillRect(50, 50, 200, 200);
        // 擦除一个尺寸是180*180的矩形
        oContext.clearRect(60, 60, 180, 180);
        // 在擦除区域生成一个尺寸是140*140的边框
        oContext.strokeRect(80, 80, 140, 140);

    }
}

结果.png

注意：这三个方法绘制后会马上显示在画布上，即是实时显示的；