【canvas】画布画矩形

        var canvas=document.querySelector("#chen");//找到画布才能操作
        var c=canvas.getContext('2d');//定义画布为2d
        //c.rect(x,y,w,h);//前面两个参数是:矩形的下x,y坐标,后面两个参数是
        c.rect(50,50,90,90);
        c.stroke();

结果:

第二丶描边矩形

c.strokeRect(100,100,60,60);//描边矩形

结果为:

第三丶填充矩形

c.fillRect(150,150,90,90);//填充矩形

结果为:

第四丶清除矩形

        c.fillRect(100,100,90,90);//填充矩形

        c.clearRect(80,80,100,100);//清楚

结果为:

原理: