概述基本路径绘制命令行和曲线
==================
TODO：将以下每个绘图命令链接到各个示例。我不知道如何执行此操作，因为指向各个示例的链接指向 draft 文件夹。
TODO：为这些路径 action 命令添加示例：stroke()，fill（），clip()
==================
路径
路径定义了一组线条和曲线，可以在画布上可视地绘制。
画布上不会自动绘制路径。但是路径的线条和曲线可以使用可调整的笔划绘制到画布上。线条和曲线创建的形状也可以填充样式填充。
路径在 Canvas 上绘制之外的用途：
- 如果 x，y 坐标在路径形状内，则进行测试。
- 定义剪切区域，其中只有剪切区域内的图形可见。剪切区域外的任何绘图都不会被绘制（==透明） - 类似于 CSS 溢出。
基本路径绘制命令是：
- beginPath 方法
- 搬去
- 了 lineTo
- 弧
- 到 quadraticCurveTo
- bezierCurveTo
- 包含 arcTo
- 矩形
- closePath
基本绘图命令的描述：
beginPath 方法
context.beginPath()
开始组装一组新的路径命令，并丢弃任何先前组装的路径。
丢弃是一个重要且经常被忽视的问题。如果未开始新路径，则将自动重绘以前发出的任何路径命令。
它还将绘图笔移动到画布的左上角原点（== coordinate [0,0]）。
搬去
context.moveTo(startX, startY)
将当前笔位置移动到坐标[startX，startY]。
默认情况下，所有路径图都连接在一起。因此，一条线或曲线的终点是下一条线或曲线的起点。这可能导致连接两个相邻图纸的意外线条。context.moveTo 命令基本上拾取绘图笔并将其放置在新坐标处，因此不绘制自动连接线。
了 lineTo
context.lineTo(endX, endY)
从当前笔位置绘制线段以协调[endX，endY]
你可以组合多个 .lineTo 命令来绘制折线。例如，你可以组合 3 个线段以形成三角形。
弧
context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)
给定中心点，半径和起始和结束角度的圆弧。角度表示为弧度。要将度数转换为弧度，你可以使用以下公式：radians = degrees * Math.PI / 180;。
角度 0 直接面向弧的中心。要绘制一个完整的圆，你可以使 endsAngle = startingAngle + 360 度（360 度== Math.PI 2）：`context.arc（10,10,20,0，Math.PI 2）;
默认情况下，弧顺时针绘制，可选[true | false]参数指示弧逆时针绘制：context.arc(10,10,20,0,Math.PI*2,true)
到 quadraticCurveTo
context.quadraticCurveTo(controlX, controlY, endingX, endingY)
绘制从当前笔位置开始到给定结束坐标的二次曲线。另一个给定的控制坐标确定曲线的形状（曲率）。
bezierCurveTo
context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)
绘制从当前笔位置开始到给定结束坐标的三次贝塞尔曲线。另外两个给定的控制坐标确定曲线的形状（曲率）。
包含 arcTo
context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);
绘制具有给定半径的圆弧。在当前笔位置形成的楔形内部顺时针绘制弧，并给出两点：Point1 和 Point2。
在弧之前自动绘制连接当前笔位置和弧开始的线。
矩形
context.rect(leftX, topY, width, height)
给定左上角和宽度和高度的矩形。
context.rect 是一个独特的绘图命令，因为它添加了断开连接的矩形。这些断开连接的矩形不会通过线自动连接。
closePath
context.closePath()
从当前笔位置绘制一条线回到起始路径坐标。
例如，如果你绘制 2 条线形成一个三角形的两条腿，closePath 将通过将第三条腿的第三条腿从第二条腿的端点拉回到第一条腿的起点来关闭三角形。
此命令的名称经常导致它被误解。context.closePath 不是 context.beginPath 的结尾分隔符。同样，closePath 命令绘制一条线 - 它不会关闭一条线。