到今天这节是有关于在Canvas中绘制图形部分的最后一篇文章。从前面的文章中我们了解到，通过Canvas中的CanvasRenderingContext2D对象中的属性和方法，我们可以很轻松的绘制出一些基本图形，比如直线、弧线、矩形、圆形、三角形等。但有很多基本图形的绘制是没有现成的方法，需要通过CanvasRenderingContext2D对象中的属性和方法组合在一起才能绘制出来，比如说点划线、箭头和正多边形等。为了更好的帮助大家在Canvas中绘制这些基本图形，可以将这些基本图形的绘制封装起来。今天这篇文章，我们主要来看看怎么将这些函数封装。

回忆前面的内容

Canvas学习系列到目前为止已整理的都是关于基本图形绘制相关的知识，主要涵盖：

• Canvas入门准备
• Canvas里的坐标系统
• Canvas坐标变换
• Canvas自定义的坐标变换
• Canvas绘制线段
• Canvas线型
• Canvas状态：save()和restore()
• Canvas绘制矩形
• Canvas绘制圆和圆弧
• Canvas绘制贝塞尔曲线
• Canvas绘制虚线和圆点线
• Canvas绘制箭头
• Canvas绘制正多边形

如果您和我一样初次接触Canvas，建议您先花一定的时间阅读上面这些文章，有助于您更好的理解下面的内容。

Canvas绘图相关属性和方法

<canvas>元素有一个getContext()方法，这个方法可以用来获取上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。我们目前学习的上下文环境都是一个2D环境，所以我们所说的也是对于2D图像而言。它具CanvasRenderingContext2D对象。这个对象包括一些绘制图形方法和设置图形样式的属性。

状态

CanvasRenderingContext2D渲染环境包含了多种绘图的样式状态（属性有线的样式、填充样式、阴影样式、文本样式等），其中该对象提供了两个方法，能帮助我们更好的使用好这些状态：

• CanvasRenderingContext2D.save()：使用栈保存当前的绘画样式状态，你可以使用 CanvasRenderingContext2D.restore() 恢复任何改变
• CanvasRenderingContext2D.restore()：恢复到最近的绘制样式状态，此状态是通过 CanvasRenderingContext2D.save() 保存到”状态栈“中最新的元素

有关于这方面的详细介绍可以阅读Canvas状态：save()和restore() 一文。

变换

CanvasRenderingContext2D渲染背景中的对象会有一个当前的变换矩阵，一些方法可以对其进行控制。当创建当前的默认路径、绘制文本、图形等会应用此变换矩阵。

• CanvasRenderingContext2D.rotate(rad)：在变换矩阵中增加旋转，角度变量表示一个顺时针旋转角度，并且用弧度表示
• CanvasRenderingContext2D.scale(sx, sy)：根据sx水平方向和sy垂直方向，为Canvas单位添加缩放变换
• CanvasRenderingContext2D.translate(dx,dy)：通过在网格中移动Canvas和Canvas原点dx水平方向、原点dy垂直方向，添加平移变换
• CanvasRenderingContext2D.transform(a, b, c, d, e, f)：使用方法参数描述的矩阵多次叠加当前的变换矩阵
• CanvasRenderingContext2D.setTransform(a, b, c, d, e, f)：重新设置当前的变换为单位矩阵，并使用同样的变量调用CanvasRenderingContext2D.transform(a, b, c, d, e, f)方法
• CanvasRenderingContext2D.resetTransform()：使用单位矩阵重新设置当前的变换

有关于Canvas中的变换涉及到了Canvas的坐标系统相关知识，建议您阅读前面介绍的Canvas里的坐标系统、Canvas坐标变换和Canvas自定义的坐标变换三篇文章。

线型

CanvasRenderingContext2D提供了相关的方法和属性控制如何在Cavnas画布中绘制线的样式风格：

• CanvasRenderingContext2D.lineWidth：线的宽度，默认值1.0
• CanvasRenderingContext2D.lineCap：线末端的类型。允许的值：butt（默认值）、round和square
• CanvasRenderingContext2D.lineJoin：定义两线相交拐点的类型。允许值：miter（默认值）、round和bevel
• CanvasRenderingContext2D.miterLimit：斜接面限制比例，默认10

有关于这几个属性的详细介绍，可以阅读Canvas绘制线段和Canvas线型。

填充和描边

填充和描边有对应的属性和方法。其中属性主要用于填充设计用于图形内部的颜色和样式，描边设计用于图形的边线；方法主要用于填充路径和描边路径：

• CanvasRenderingContext2D.fillStyle：图形内部的颜色和样式（填充），默认#000
• CanvasRenderingContext2D.strokeStyle：图形边线的颜色和样式（描边），默认#000
• CanvasRenderingContext2D.fill()：使用当前的样式填充子路径
• CanvasRenderingContext2D.stroke()：使用当前的样式描边子路径

路径

Canvas的CanvasRenderingContext2D对象中用于操作路径的方法主要有：

• CanvasRenderingContext2D.beginPath()：清空子路径列表开始一个新的路径。当你想创建一个新的路径时，调用此方法
• CanvasRenderingContext2D.closePath()：使笔点返回到当前子路径的起始点。它尝试从当前点到起点绘制一条直线。如果图形已经是封装的或者只有一个点，那么此方法不会做任何操作
• CanvasRenderingContext2D.moveTo(x, y)：将一个新的子路径的起始点移动到(x, y)坐标
• CanvasRenderingContext2D.lineTo(x, y)：使用直线连接子路径的最后的点到(x, y)坐标
• CanvasRenderingContext2D.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：添加一个三次贝塞尔曲线路径。该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改
• CanvasRenderingContext2D.quadraticCurveTo(cpx, cpy, x, y)：添加一个二次贝塞尔曲线路径
• CanvasRenderingContext2D.arc(x, y, r, startAngle, endAngle, [anticlockwise])：绘制一段圆弧路径，圆弧路径的圆心在(x,y)位置，圆弧的半径为r，根据anticlockwise指定圆弧的方向从startAngle开始绘制，到endAngle结束（也就是旋转方向，默认为顺时针）