canvas之绘制矩形和清除画布

多种绘制方式

• 方式一：自己用线条进行绘制

• 方式二：rect函数绘制

• 方式三：strokeRect绘制描边的矩形

• 方式四：

综合案例绘制多个重叠的矩形

清除画布

 //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();

    pencil.fillStyle='blue';
    pencil.fillRect(40,60,200,200);

    //用橡皮擦去颜色。
    //参数描述： 擦除的起始x坐标，擦除的起始y坐标； 想要擦掉的宽度，想要擦掉的高度
    pencil.clearRect(50,80,50,50);

    //擦除画布上的所有元素
    // pencil.clearRect(0,0,cas.width,cas.height);