在学画画的时候，线条是最基本的了，而线条的链接能够组成任何图形。在Canvas中也是如此。
在开始以前咱们先拿出画布和画笔：
复制代码
代码以下:
var cvs = document.getElementById('cvs'); //画布
var ctx = cvs.getContext('2d'); // 画笔
咱们画画的时候，落笔点是不固定的，随时都会变。canvas虽然不是经过手来决定落笔点，但也有一个方法,就是moveTo。moveTo的做用至关于把笔尖提离画布，而后移动到指定的点（即坐标）。
复制代码
代码以下:
ctx.moveTo(x,y)
此过程当中不会画出任何图形，至关于你提着笔在画布上晃来晃去。
但晃来晃去是没用的，咱们必须开始画。先画最简单的：直线
画直线的方法即lineTo，他的参数和moveTo同样的，都是一个点。
ctx.lineTo(x,y)固然，你画线的时候，落笔点也跟着移动了，因此lineTo以后落笔点就变成了他的目标点了。
复制代码
代码以下:
ctx.moveTo(100,100);
ctx.lineTo(200,100);
此时你刷新网页，会发现画布上没有预想中的线，什么也没有。由于咱们还少了一个步骤.lineTo实际上是画的一条“路径”，自己是不可见的。若是要让他显示出来，咱们必须对他进行“画”的操做。
用过PS的同窗，确定能知道图形的两种模式，一种是填充，另外一种是描边。如今咱们已经画了一条线，至关于PS中勾了一条路径，此时给路径描一下边，就能显示出图形了。
canvas描边的方法是stroke().如今让咱们把代码补全：
复制代码
代码以下:
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();此时刷新，就能看到一条线了。固然，你也能够连续绘制出几百条路径，再执行描边动做，便可一下画出几百条线。如今咱们来用4条线画一个矩形：
复制代码
代码以下:
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.stroke();
这里咱们就是先绘出所有路径，再一次性描边。
——–做者的抱怨：Canvas绘图有个很差的地方就是：基本靠猜，很不直观。
严重提示：canvas的绘图过程（即填充与描边）是很是消耗资源的，若是想节省系统资源提升效率，最好是绘制好全部路径，再一次性填充或描边图形。
由上面的图形咱们能够看出，默认的线条粗细是1px，而线条颜色是黑色。固然咱们能够设置他们,但奇怪的是设置线条宽度是lineWidth，而设置线条样式的却叫strokeStyle，为何不是lineStyle呢？我也不知道。：
复制代码
代码以下:
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
上面的代码把线条宽度设置成了10px，线条颜色变成了半透明的红色。
问题：若是我画的矩形路径是宽高都是100，此时个人边线宽度是10px，那么这个描了边的矩形总体宽高是多少？是100+10*2=120吗？
若是边线是彻底描在路径外侧的话，那么就是120。但Canvas不是。Canvas中的线条都有一条“中线”，这条中线位于line的绝对中间，线条的笔画以中线向两侧扩展。好比你的线条宽度是1，那么中线就在0.5的位置；宽度是5，那么中线就是在2.5。canvas的图形在描边的时候，都是路径与line的中线贴合，而后描边。如图2：
因此，描边的时候线的一半在外侧，一半在内侧，即上面的矩形的总体宽度是100+(10/2)*2，等于110.
也正是由于这个缘由，左上角出现缺角就理所固然了。由于这里没人画。
但为何其他的角没有出现缺口呢？看你的图不是4个角都有缺口吗？
那是由于，我画线的过程当中没有把画笔“提起来”，画笔是连续的，即没有moveTo过。不信咱们如今来moveTo一下：
复制代码
代码以下:
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.moveTo(200,100); //注意这里
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
ctx.stroke();
咱们再画第二条线以前moveTo了一下，并且moveTo连坐标都没变，仍是那个点，但刷新后图形变成了这个样子[图3]：
明白了？由于咱们把笔提起来了。
如今咱们删掉moveTo，不要纠结他了，咱们来思考一下如何把左上角那个缺角给补上？
首先问个问题，咱们的路径闭合了吗？这不是废话么，咱们不是已经把路径绕回原点了么？固然算是闭合了！
错！这样只是让路径最后一个点和起点重合了而已，路径自己却没有闭合！
Canvas怎么闭合路径？用closePath().
复制代码
代码以下:
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.closePath();//闭合路径
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
ctx.stroke();
此时刷新，就是一个完美的正方形了。图4：
不管咱们把线条改到多粗————越粗越有人喜欢是吧？————这个四方形的四个角都是规矩的直角，不会出现圆滑的状况。圆滑的角是什么状况？请看PS中的四方形描边，图5：
看到了吧，越粗的边线，他的角的圆弧越大。
若是我想Canvas里面的边线也和PS这种同样，有没有办法呢？固然有，就是lineJoin属性。
lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角），如图6：
毫无疑问咱们一下就能明白咱们的矩形用的是尖角，因此试着把他改为圆角看看：
图形变成了这样，图7：
有点像PS的了吧？
另外，经过前面图咱们了解到，Canvas的线条两端是平的，可不能够改呢？毕竟平的很差看。
也是能够的，即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方），如图8
看图就能发现，其实平头跟方头是同样的，区别只是平头没有伸出去那么一截。圆头和方头都会伸出去一截，这一节是多长呢？就是线条宽度的一半。
你有没有想到什么？哈哈，前面的闭合路径的问题，若是咱们把lineCap设为方头，效果也是同样的！
但为了保险起见，咱们仍是要把路径闭合了，切记！
我还要提醒一下：闭合的路径没有端点！因此闭合的路径上看不到端点的样式。
另外：lineCap与lineJoin有点类似，注意不要搞混。
若是你眼尖而且运气很差，你可能会发现有时候1像素的线条不是1像素宽，好像要宽一些，模糊一些。如图9：
恭喜你!你遇到了一个不是bug的bug。这个很特别，我把他放到下一篇文章讲吧