学了之前的内容,我们用到了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();
效果现实
那么我们还是以实际效果为准,closePath会拉一条子路径(直线)到路径列表中第一个子路径的起点。
绘制路径步骤
- beginPath产生新路径。
- 调用moveTo移动笔触到画图起点,调用相应路径方法画子路径(lineTo、arc等)。
- 如果需要闭合图形,调用closePath去封闭图形。如果不封闭就不调用。
- fill或者stroke填充闭合的图形或者描边非封闭的图形。