- cvs.strokeRect(x,y,w,h); –> 带边框的矩形
- x,y 是这个矩形左上角的坐标
- w,h 是这个矩形的宽高
- 注意:如果设置边框 边框一半在里面一半在外面
- cvs.strokeRect(x,y,w,h); –> 带边框的矩形
案例1
12345678910function draw1(){//填充矩形cvs.fillStyle='#fccdda';//画之前填充颜色cvs.fillRect(10,20,100,50);//设置填充矩形,矩形的左上角坐标为10,20 宽100px 高50px//边框矩形cvs.strokeStyle='red';//设置边框的矩形边框颜色cvs.lineWidth=20;//设置边框宽度20pxcvs.strokeRect(150,20,100,50);//设置边框矩形, 矩形的左上角坐标为150,20 宽100px 高50px}draw1();案例2
12345678910111213function draw2(){//清除填充图的某一部分,清除的还是一个矩形cvs.clearRect(x,y,w,h)cvs.fillStyle='orange';//画之前填充颜色cvs.fillRect(20,100,300,100);//设置填充矩形,矩形左上角坐标为20,100 宽300px 高100pxcvs.clearRect(140,140,60,60);//清除填充图的矩形 清除的这个矩形左上角坐标140,140 宽60px 高60pxcvs.clearRect(20,100,40,40);//清除填充图的矩形 清除的这个矩形左上角坐标20,100 宽40px 高40pxcvs.clearRect(280,100,40,40);//清除填充图的矩形 清除的这个矩形左上角坐标280,100 宽40px 高40px}draw2();
Canvas之3绘制矩形
您的支持将鼓励我继续创作!