学了之前的内容,我们用到了fillRect()和strokeRect()这两个2D渲染上下文对象(CanvasRenderingContext2D对象,这名字拗口,有些书籍把context解释为"环境")的方法，这2个方法与其他绘图方法不同，调用之后，浏览器立马就把图形展现出来了；其他绘图方法大部分都是路径相关的方法，包括beginPath()、closePath()、moveTo()、lineTo()、fill()、stroke()等等.

概括一下就是canvas支持两种基本形状;一:矩形,二:路径

canvas路径开始接触是不好理解的,官方解释是这样的,lists of points connected by lines,翻译过来就是：点的列表，这些点通过线连接起来；注意这里的点指的是图形的端点(也就是你画图的起点或终点，比如lineTo的起点或终点)，这个线可能是直线也可能是曲线。canvas路径和Photoshop里面的钢笔工具有些类似，用钢笔工具把路径画出来，然后再选择填充或者描边， 这里的fill和stroke方法分别与之对应。你设定2D渲染上下文对象的相关属性就对应你设置ps相关菜单选项的操作。

beginPath()

开启新路径的方法，没有参数；生成一个路径列表，帮助我们记录子路径，里面存放的应该是子路径相关坐标信息，但是官方的文档对这个概念解释的有点模糊；因为先前我们对路径的定义是点的列表，现在里面又是存放的子路径。但是按照逻辑推理来说，路径列表里面应该存放子路径。概念上的模糊并不影响我们的使用，我们就可以把子路径看做photoshop里面类似的东西，那些直线和曲线，它们通过点连接起来，甚至不连接起来，比如画完一条线之后，你立刻moveTo到其他坐标继续画图，这个时候就类似于你把画笔提起来，移动到其他位置继续画图；模拟现实而已。

closePath()
官方解释：增加一条线段到路径，线段的终点是当前子路径的起点。

官方的解释总是让人感到不解，但是我测试出的结果是，closePath会返回路径当中第一条子路径的起点，测试代码：

 var c=document.getElementById("my_canvas");
 var ctx=c.getContext("2d");
 // 
 ctx.beginPath();
 ctx.lineWidth = 1;
 ctx.strokeStyle = "#0000ff";

 ctx.moveTo(100, 100);
 ctx.lineTo(100,550);
 ctx.lineTo(500,140);
 ctx.lineTo(300,240);
 ctx.closePath();
 ctx.stroke();

效果现实

canvas closePath

那么我们还是以实际效果为准，closePath会拉一条子路径(直线)到路径列表中第一个子路径的起点。

绘制路径步骤
  1. beginPath产生新路径。
  2. 调用moveTo移动笔触到画图起点，调用相应路径方法画子路径(lineTo、arc等)。
  3. 如果需要闭合图形，调用closePath去封闭图形。如果不封闭就不调用。
  4. fill或者stroke填充闭合的图形或者描边非封闭的图形。
渝ICP备20006974号-2