三步搞定！画三角形不再困难，还能绘制更多不规则图形

画三角形

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.stroke();

画三角形其实很简单！只需要3个点就能搞定！用路径把这几个点连成封闭形状。这样做就不怕影响整体造型了，每一部分都能独立呈现。先用beginPath()开启路径，再用moveTo()把画笔移到要画的那一点，接着是用lineTo()把剩下的两点接上，最后来个closePath()把线条封住，简单的三角形就完事儿了。这个方法同样也适合其他不规则图形的绘制哟~

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();

画三角形的时候别忘了封闭路径！用closePath()这个方法就能让你现在正在画的路径回到起点去，这样子就形成了一个完整的封闭路径~这种方式帮我们避免了画复杂图案时可能会出现的没有封闭、画重了等问题。做完了封闭之后，整个图形看上去就更精致更精确

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();

我们不仅可以调整线条粗细和色彩来绘制各种形状，比如空心三角形或者空心矩形。这些属性和方法真的非常实用，让我们绘制起来更有创意！

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();

线框修改与miterLimit

画图时，常要改改线框，比如把那个叫miterLimit的属性调大点，这样就能让尖角正常显露了。如果值小，可能就会把尖角给裁掉或者变成bevel样式。所以这特性对连线的地方特重要，还得看你实际绘画场景来微调~

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();

线条末尾也要小心处理！用lineCap属性来控制线头形状，有butt、round和square三种选择。灵活应用这个属性，能画出更合心意的图形~

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();

画曲线要小心弧度单位！圆圆的弧其实是用弧度来表示的。算起始点和终点坐标时，记得把弧度换成角度。把弧度和角度这俩灵活转换就不怕画出奇怪的形状。

arcTo方法与曲线绘制

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)

arcTo()这个方法就是能帮你画出弯弯曲曲路的好手。只要告诉它起点、转弯点和终点这几个信息，就能画出各种漂亮的弧形了。画起来可能看起来挺复杂，但其实在生活中，基本上就是用来画那种光滑的曲线，或者把两根直线联系起来用的。

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();

用arcTo()画图时，要先看起点、拐点、终点之间的角度大小，配合上r这个圆心半径来算。你懂得调整这些数字的话，就能随心所欲地画出各种形状，凹凸不平的曲线也行！如果是更复杂的图案或特别要求的设计， arcTo()可是帮得大忙。

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();

。