3、画一个矩形

closePath()闭合图形。

我们在画折线的时候用到beginPath()，我们说有始有终，需要用closePath()闭合图形，这样我们在画的时候不用画最后一笔，都可以闭合的哦。

首先我们用上一篇笔记画折线的方法画一个矩形

var canvas=document.getElementById('canvas');//画布
canvas.width=800;
canvas.height=600;
var context=canvas.getContext('2d');//画笔
context.strokeStyle="#0FC86A"
context.lineWidth=20
context.beginPath();
context.moveTo(10,10);
context.lineTo(450,10);
context.lineTo(450,300);
context.lineTo(10,300);
//context.lineTo(10,10);
context.closePath();//一旦使用了closePath最后一笔可以不画
context.stroke();

fill()填充

现在我们给矩形填充上颜色fill()。stroke描边一样。fill填充也有填充颜色。fillstyle

var canvas=document.getElementById('canvas');//画布
canvas.width=800;
canvas.height=600;
var context=canvas.getContext('2d');//画笔
context.strokeStyle="#0FC86A";
context.lineWidth=3;
context.beginPath();
context.moveTo(10,10);
context.lineTo(250,10);
context.lineTo(250,100);
context.lineTo(10,100);
//context.lineTo(10,10);
context.closePath();//一旦使用了closePath最后一笔可以不画

context.fillStyle="pink";//给矩形填充上粉红色
context.fill();//画笔填充

context.stroke();//画笔描边

因为之前说过了Canvas是基于状态的绘制，只有调用了stroke()和fill()才确定绘制。所以我们要把这两行代码放在最后，其余的状态设置的代码放在它们之前，将状态设置与确定绘制的代码分隔开。增强代码的可读性。

封装的矩形的方法

当我们绘制图形的时候，要是用了上面的方法，绘制一个矩形还好，要是绘制十个百个矩形，不要要写得累死。而且代码代码也冗余啊。
所以我们迫切需要一个封装好的方法，当需要绘制矩形的时候，去调用就可以了。
我们可以根据矩形的开始坐标，矩形的长和宽，去确定矩形的位置和大小。

rect()方法绘制矩形

var canvas=document.getElementById('canvas');//画布
canvas.width=800;
canvas.height=600;
var context=canvas.getContext('2d');//画笔
context.strokeStyle="#0FC86A";
context.lineWidth=3;

context.beginPath();

context.rect(10,10,240,90);//绘制矩形

context.closePath();//一旦使用了closePath最后一笔可以不画
context.fillStyle="pink";//给矩形填充上粉红色
context.fill();//画笔填充
context.stroke();//画笔描边

我们还可以画一个魔性的图形哦（画完是不是眼都花了）

var canvas=document.getElementById('canvas');//画布
canvas.width=800;
canvas.height=600;
var context=canvas.getContext('2d');//画笔
context.strokeStyle="#0FC86A";
context.lineWidth=3;
context.beginPath();
for(var i=0; i<20; i++){
	context.rect(200 + 10 * i, 100 + 10 * i, 400 - 20 * i, 400 - 20 * i);//绘制矩形
}
context.stroke();

猜你喜欢