绘制矩形的简单方法

 

<canvas id="canvas" style="width:500px;height:500px;background:#999">ddafc</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
context.lineWidth=1;
context.strokeStyle="red";
context.moveTo(50,50);
context.lineTo(100,50);
context.lineTo(100,100);
context.lineTo(50,100);
context.closePath();
//context.lineTo(50,50);
context.stroke();

context.beginPath();
context.lineWidth=5;
context.strokeStyle="pink";
context.rect(80,80,60,60);//第一种方法
context.stroke();
</script>

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

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

 

 

<canvas id="canvas" style="width:500px;height:500px;background:#999">ddafc</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
context.beginPath();
context.lineWidth=5;
context.strokeStyle="pink";
context.rect(10,10,60,60);
context.stroke();

context.beginPath();
context.lineWidth=5;
context.strokeStyle="red";
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);