讲之前呢，我还是想温习一下，毕竟上文还有几个属性没有讲到，那我们从画三角形开始吧！
如果看了上文，机智的少年肯定会想到，三角形，多简单啊，无非是比直线多一个点，于是这少年就开始动手了：
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.stroke();
呀呵，怎么是一个折线，三角形不是只有三个点吗？是不是因为没有闭合呢？那我再加一个点：
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
ctx.stroke();哈哈，果然机智如你啊！这个思路其实是正解的，三角形就是这么简单，其实还有一种方式可以画三角形，只需3个点，那就是我们要介绍的：
closePath()闭合路径
有闭合就是开始，一般来说他们是成双成对的
beginPath()开始路径
这对活宝的用法一般是：
ctx.beginPath(); ctx.closePath();
先开始路劲，里面写你要绘制的内容，然后结束路劲，相当于是一个盒子已经封箱了，这样做有个好处就是可以避免绘制过程中的样式污染，你不知道怎么污染？好吧，看下面：
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
//第一个三角
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
ctx.stroke();
//第二个三角
ctx.strokeStyle='green';
ctx.moveTo(150,50);
ctx.lineTo(200,100);
ctx.lineTo(150,200);
ctx.lineTo(150,50);
ctx.stroke();如图，如果我本来是想让第一个三角的颜色为红色，第二个为绿色，但是现在的结果却都是绿色，而且眼尖的同学还看到，第一个三角感觉有2个颜色，颜色也特别的深，感觉是叠了2个三角，你没看到？好，我们改改，你在看：
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
//第一个三角
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
//ctx.stroke();
//第二个三角
ctx.strokeStyle='green';
ctx.moveTo(150,50);
ctx.lineTo(200,100);
ctx.lineTo(150,200);
//ctx.lineTo(150,50);
ctx.stroke();我们先不画第一个三角，也不画第二个三角的左边一边，然后看一下：
第一个三角没有双重色了，说吧绘制了2次，一次红，一次绿，去掉了重绘，后面的颜色也将前面的颜色污染了，这不是我们想要的，这污染，你应该明白了吧！
那我们使用那对活宝看看：
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
//第一个三角
ctx.beginPath();
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
ctx.closePath();
ctx.stroke();
//第二个三角
ctx.beginPath();
ctx.strokeStyle='green';
ctx.moveTo(150,50);
ctx.lineTo(200,100);
ctx.lineTo(150,200);
ctx.lineTo(150,50);
ctx.closePath();
ctx.stroke();这才是我们想要的嘛，你玩你的，我玩我的，互不干扰，（你说画三角只需3个点的呢，吹牛B吧，你看你都是用的4个点），哦，对。
closePath()方法创建从当前点到开始点的路径，这是对此方法的描述，也就是说，使用这个方法，就能将画笔移到beginPath()的位置，这样才能结束画布，所以照这个理论，当画三角时，画到第三个点时，我们用closePath()方法让画笔回到起点，再画线，是不是就闭合了，看看效果：
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.closePath();
ctx.stroke();看，只有三个点，不是折线吧，后面要讲的什么扇形图，不规则图形都可以用此技能，妥妥的！
嗨，也不过如此，你这线条都是一像素的，又不能跟孙悟空的金箍棒一样，要大变大，要小变小，哼，谁说的，哥有神器在手，天下无敌！
我的法宝就是：
lineWidth设置或返回当前的线条宽度
怎么用？哥给一个跟金箍棒：
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
vartimer=null;
varnum=1;
ctx.moveTo(150,50);
ctx.strokeStyle='gold';
setInterval(function(){
if(num==100){
clearInterval(timer);
num=1;
}else{
num++;
};
ctx.lineTo(150,100+num*2);
ctx.lineWidth=num;
ctx.stroke();
},100)金箍棒，大，大，大，大，在大点，哈哈哈~~~
咳咳，严肃点，有此神器，我们就可以修改任何线框，线条的线条宽度了，比如说空心三角形，空心矩形，当然，空心文字你就不要问我了，我不知道~
关于线条，还有另外2个属性：
lineJoin两线交叉的拐角类型
参数：
miter：尖角默认
bevel：斜角
round：圆角
什么意思，那就用空心矩形为例：
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.lineWidth=10;
ctx.beginPath();
ctx.lineJoin='miter';
ctx.strokeRect(100,10,80,80);
ctx.closePath();
ctx.beginPath();
ctx.lineJoin='round';
ctx.strokeRect(100,110,80,80);
ctx.closePath();
ctx.beginPath();
ctx.lineJoin='bevel';
ctx.strokeRect(100,210,80,80);
ctx.closePath();右侧为折线效果
配合折线效果，还有一个属性：
miterLimit规定最大斜接长度。什么意思？看看右边的这个折线图，最下面那组的尖尖角，这个就是斜接，意思通俗意思就是规定那个尖尖角的长度，如果尖尖角的长度小于miterLimit的值，则正常显示，如果大于的话，就会被截掉一部分，其形状就跟lineJoin='bevel'一样一样的，且此方法只对lineJoin="miter"默认值的时候才起作用，给个形象的例子吧：
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.beginPath();
ctx.miterLimit=19;
ctx.moveTo(20,20);
ctx.lineTo(150,27);
ctx.lineTo(20,34);
ctx.stroke();
ctx.beginPath();
ctx.miterLimit=18;
ctx.moveTo(20,120);
ctx.lineTo(150,127);
ctx.lineTo(20,134);
ctx.stroke();ctx.beginPath(); ctx.lineJoin="bevel"; ctx.moveTo(20,220); ctx.lineTo(150,227); ctx.lineTo(20,234); ctx.stroke();
如图，当miterLimit的值大于等于19时，尖尖角正常显示，小于18时，尖尖角被截断了，效果跟设置lineJoin='bevel'是一样的，暂不知道会有什么作用，待以后来发掘！
另一个：
lineCap设置或返回线条的结束端点样式注意，这是设置线条的哦！
参数：
butt默认。向线条的每个末端添加平直的边缘。
round向线条的每个末端添加圆形线帽。
square向线条的每个末端添加正方形线帽。
什么意思？线条嘛，我们还是以金箍棒为例，算了，还是用线条吧（看到金箍棒我就想笑了）；
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.lineWidth=10;
ctx.beginPath();
ctx.lineCap='butt';
ctx.moveTo(50,50);
ctx.lineTo(200,50);
ctx.stroke();
ctx.beginPath();
ctx.lineCap='round';
ctx.moveTo(50,100);
ctx.lineTo(200,100);
ctx.stroke();
ctx.beginPath();
ctx.lineCap='square';
ctx.moveTo(50,150);
ctx.lineTo(200,150);
ctx.stroke();可以看到，后面2个比第一个要长一点，具体长多少呢？画一个图示意一下：
圆角和方脚的原理其实是这样的，很明显多出的一部分的宽度就是线条的一半的长度，所以要精确计算其长度，此小细节需谨记！
现在我们来讲讲画圆及其相关的图形：
arc(x,y,r,sAngle,eAngle,counterclockwise)
什么意思？x,y表示坐标点表示圆心坐标，r表示半径，sAngle表示开始弧度，eAngle表示结束弧度，counterclockwise表示顺时针还是逆时针方式，默认为顺时针false，逆时针为true
注意，这里的角度是用弧度表示的，不是直接写角度，那问题来了