Canvas之3绘制矩形

1
  function draw1(){
2
    //填充矩形
3
    cvs.fillStyle='#fccdda';//画之前填充颜色
4
    cvs.fillRect(10,20,100,50);//设置填充矩形,矩形的左上角坐标为10,20 宽100px 高50px
5
    //边框矩形
6
    cvs.strokeStyle='red';//设置边框的矩形边框颜色
7
    cvs.lineWidth=20;//设置边框宽度20px
8
    cvs.strokeRect(150,20,100,50);//设置边框矩形，  矩形的左上角坐标为150,20 宽100px 高50px
9
  }
10
  draw1();

1
function draw2(){//清除填充图的某一部分，清除的还是一个矩形cvs.clearRect(x,y,w,h)
2
  cvs.fillStyle='orange';
3
  //画之前填充颜色
4
  cvs.fillRect(20,100,300,100);
5
  //设置填充矩形,矩形左上角坐标为20,100 宽300px 高100px
6
  cvs.clearRect(140,140,60,60);
7
  //清除填充图的矩形 清除的这个矩形左上角坐标140,140 宽60px 高60px
8
  cvs.clearRect(20,100,40,40);
9
  //清除填充图的矩形 清除的这个矩形左上角坐标20,100 宽40px 高40px
10
  cvs.clearRect(280,100,40,40);
11
  //清除填充图的矩形 清除的这个矩形左上角坐标280,100 宽40px 高40px
12
}
13
draw2();