canvas绘制路径

canvas绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

canvas绘制基本步骤

1.首先，你需要创建路径起始点。
2.然后你使用画图命令去画出路径
3.之后你把路径封闭。
4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
生成路径的第一步叫做beginPath()。
本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

moveTo(x, y)

将笔触移动到指定的坐标x以及y上
当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。

lineTo(x, y)

将笔触移动到指定的坐标x以及y上
绘制一条从当前位置到指定x以及y位置的直线。

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。
闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。
如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做
当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。
但是调用stroke()时不会自动闭合

stroke()

通过线条来绘制图形轮廓。
不会自动调用closePath()

fill()

通过填充路径的内容区域生成实心的图形。
自动调用closePath()

绘制矩形API：rect（x,y,width,height）

绘制一个左上角坐标为（x,y）,宽高为width以及height的矩形。
当该方法执行的时候，moveTo（）方法自动设置坐标为参数（0，0）；
也就是说，当前笔触自动重置会默认坐标。

ctx.fillrect(x,y,width,height)相当于

ctx.rect(x,y,width,height);
ctx.fill();

ctx.strokerect(x,y,width,height)相当于

ctx.rect(x,y,width,height);
ctx.stroke();

lineCap

lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。
有3个可能的值，分别是

butt	线段末端以方形结束 ，维持线段本身的宽高 (默认值)
round	线段末端以圆形结束，渲染时在线段两端分别加了半圆
square	线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域

save()

save() 是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法
保存到栈中的绘制状态有下面部分组成：
	当前的变换矩阵。
	当前的剪切区域。
	当前的虚线列表.
	以下属性当前的值： 
	strokeStyle, 
	fillStyle,  
	lineWidth, 
	lineCap, 
	lineJoin...

restore()

restore() 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态，
将 canvas 恢复到最近的保存状态的方法。 
如果没有保存状态，此方法不做任何改变。

save()和restore()成对出现
代码示例：

ctx.save()
//关于样式的设置
ctx.beginPath();//清除绘制路径
ctx.restore();

路径容器

每次调用路径api时，都会往路径容器里左登记；
调用beginPath时，清空整个路径容器

样式容器

每次调用样式api时，都会王样式容器里做登记；
调用save（）时，将样式容器里的状态压入样式栈；
调用restore（）时，将样式栈顶状态弹出到样式容器里，进行覆盖。

样式栈

调用save（）时，将样式容器里的状态压入样式栈；
调用restore（）时，将样式栈顶状态弹出到样式容器里，进行覆盖。