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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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();
您的支持将鼓励我继续创作!