绘制矩形

Posted 2020-06-28

1.与矩形有关的方法：fillRect()    strokeRect()   clearRect()  这三个方法都能接受四个参数:矩形的x坐标，矩形的y坐标，矩形的宽度和矩形的高度；单位都是像素

2

//绘制红色矩形.   填充为红色；从点（10,10）开始绘制矩形，宽和高均为50像素，

context.fillStyle="#ff0000";

context.fillRect(10,10,50,50);

//绘制蓝色矩形 然后填充被设置成了半透明的蓝色  从点（30,30）开始绘制，宽和高为50像素

context.fillStyle="rgba(0,0,255,0.5)";

context.fillRect(30,30,50,50);

 

//绘制红色描边矩形

context.strokeStyle="#ff0000";

context.strokeRect(10,10,50,50);

//绘制蓝色描边矩形

context.strokeStyle="rgba(0,0,255,0.5)";

context.strokeRect(30,30,50,50);

3.

lineWidth;描边线条的粗细 值可以是任意整数;

lineCap:控制线条末端的形状是平头，圆头，还是方头 “butt" "round" "square"

lineJoin:控制线条相交的方式是圆交，斜交，还是斜接 round bevel miter

 

4.context.clearRect(10,10,30,30) 从点（10,10）开始的宽30 高30 的矩形清除掉