绘制矩形的简单方法

 

<canvas ></script>

beginPath：在上一个图的基础上重新绘制另一个图；

rect(x,y,w,h)：绘制矩形的起点坐标及长宽

 

 

<canvas > context.strokeRect(10,80,60,60);//第二种方法

 

strokeRect(x,y,w,h)：相当于rect和stroke的结合体；

 

以下两种是有填充的

//第三种方法

 

context.beginPath();
context.lineWidth=5;
context.fillStyle="pink";//填充色
context.rect(80,10,60,60);
context.fill();//与stroke方法作用相同

 

//第四种方法
context.beginPath();
context.lineWidth=5;
context.fillStyle="red";
context.fillRect(80,80,60,60);