学了之前的内容,我们用到了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