canvas基础--矩形

上回我们了解了线条，由线→面，今天我们来说**矩形**
画矩形之前呢，我们先思考如何才能画一个矩形？很简单，就是四条线段凑到一起，围成一个面，那么我们在写的时候是不是真的要画四条直线呢？当然不要---确定初始位置，改变终点位置，三次就好。


备注：一下我们画图形，都是按照顺时针画的哟。
还是按照我们之前学画直线的方法：
获取元素myCanvas
调用方法:getContext("2d");
开始路径:ele.beginpath();
确定起点位置:ele.moveTo(x,y);
终点位置(至少三个，才能围成矩形)。:ele.lineTo(x,y);
(设置相关样式--线宽、线的颜色可以根据自己喜好)
渲染图形：ele.stroke();(必须的)。
封闭图形:ele.closePath();//这个close与begin没有关系，知识为了形成闭合图形（其实就是为了少写一个lineTo(终点即原点x,终点即原点y);)
完成了上述步骤，一个矩形就画好了。那么我们来做一个小练习，


实现下图效果：
```
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
var arr = ["red","blue","yellow","pink"];
for (var i = 0;i<arr.length;i++) {
    var num = 20*i+10;
    context.beginPath();
context.moveTo(num,num);
context.lineTo(200+num,num);
context.lineTo(200+num,80+num);
context.lineTo(num,80+num);
context.fillStyle  = arr[i];
context.fill();
}
```
到这里我们的练习就完成了。
这里就要说说两种**不同的方法**画出来的**不同效果**的矩形：
* 镂空矩形:用到stroke();
```
            context.beginPath();
context.moveTo(30,30);
context.lineTo(200+30,30);
context.lineTo(200+30,80+30);
context.lineTo(30,80+30);
//这里就看出来context.closePath();的重要性了，不加为图1，加了才为图2，
context.closePath();
context.strokeStyle = 'red';
context.stroke();
```
图1：
图2：


* 实心矩形：用到fill();
```
            context.beginPath();
context.moveTo(30,30);
context.lineTo(200+30,30);
context.lineTo(200+30,80+30);
context.lineTo(30,80+30);
//既然是实心的，那么closePath();方法就不用了
// context.closePath();
context.fillStyle = 'red';
context.fill();
```
结果如图3：


其实我想说的事画矩形，除了上述方法，还有fillRect(),以及rect();
* fillRect();
```
context.beginPath();
context.fillStyle = "red";
//四个参数分别是(位于X轴坐标，位于Y轴坐标，width，height);
context.fillRect(100,100,200,150);
```
* rect();
```
context.beginPath();
context.fillStyle = "red";
//参数和fillRect();一样
context.rect(100,100,200,150);
context.fill();
```
至于得到的结果：效果都如图3所示。




那提到了rect();就不得不说一个方法：**isPointinPath(x,y);**
加入我们要判断某个点是不是在我们所画的图形内部，就可以调用该方法,知识这个方法有一定的限制：
```
//只有通过context.rect(0,0,50,50);画出来的图形才能进行判断，
//但是context.fillRect(20,20,100,100);画出来的图形不能进行判断
if(context.isPointInPath(51,51)){
console.log("在图形内");
}else{
console.log("不在图形内");//51不在图形内
}
```
一定要注意哦：使用该方法，只能判断当前所处的位置是否在图形内。




再来一个小效果：绘制**简易棋盘** :
先看看效果：
代码如下：
```
    var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
var color = "";
for (var i=0;i<8;i++) {
for (var j=0;j<8;j++) {

if((i%2==1 && j%2==1) || (i%2==0 && j%2==0)){
// context.fillStyle = "black";
color = "black";
}
else{
// context.fillStyle = "white";
color = "white";
}
context.beginPath();
context.fillStyle = color;
context.fillRect(0+j*50,0+i*50,50,50);
}
}
```