Canvas之3绘制矩形

• 1. cvs.fillRect(x,y,w,h); –> 填充矩形
     • x,y 是这个矩形左上角的坐标
     • w,h 是这个矩形的宽高
• 1. cvs.strokeRect(x,y,w,h); –> 带边框的矩形
     • x,y 是这个矩形左上角的坐标
     • w,h 是这个矩形的宽高
       • 注意:如果设置边框 边框一半在里面一半在外面
• 1. cvs.clearRect(x,y,w,h); –> 清除填充图的某一部分，清除的还是一个矩形
     • x,y 是这个矩形左上角的坐标
     • w,h 是这个矩形的宽高

       案例

• 案例1

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

• 案例2

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