html5-canvas 基本路径绘制命令概述：直线和曲线

示例

==================

待办事项：将下面的每个绘图命令链接到各自的html" target="_blank">示例。我不知道如何执行此操作，因为指向各个示例的链接都指向“草稿”文件夹。

TODO：这些路径“行动”命令添加的例子：stroke()，fill()，clip()

==================

路径

路径定义了一组可以在画布上可见地绘制的直线和曲线。

不会在画布上自动绘制路径。但是，可以使用可设置样式的笔触将路径的直线和曲线绘制到“画布”上。由直线和曲线创建的形状也可以填充为可样式化的填充。

路径除了在画布上绘制外还有其他用途：

• 点击测试x，y坐标是否在路径形状内。

• 定义一个裁剪区域，其中只有裁剪区域内的图形才可见。裁剪区域之外的任何图形都不会绘制（==透明）-与CSS溢出类似。

基本的路径绘制命令是：

• beginPath

• 搬去

• lineTo

• 弧

• 二次曲线

• 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直接从圆弧的中心向右。要绘制一个完整的圆，可以使EndingAngle = 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)

二次曲线

context.quadraticCurveTo(controlX, controlY, endingX, endingY)

绘制从当前笔位置开始到给定结束坐标的二次曲线。另一个给定的控制坐标确定曲线的形状（弯曲度）。

bezierCurveTo

context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)

绘制从当前笔位置开始到给定结束坐标的三次贝塞尔曲线。给定的另外2个控制坐标确定曲线的形状（弯曲度）。

arcTo

context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);

绘制具有给定半径的圆弧。圆弧在当前笔位置所形成的楔形内顺时针绘制，并给出两个点：Point1和Point2。

在圆弧之前会自动绘制一条连接当前笔位置和圆弧起点的线。

直肠

context.rect(leftX, topY, width, height)

在给定的左上角以及宽度和高度的情况下绘制一个矩形。

该context.rect是一个独特的绘图命令，因为它增加了断开的矩形。这些断开的矩形不会自动通过线连接。

closePath

context.closePath()

从当前笔的位置绘制一条线回到起始路径坐标。

例如，如果您绘制两条形成一条三角形的两条腿的线，closePath则通过从第二条腿的端点到第一条腿的起点绘制三角形的第三条腿来“闭合”该三角形。

此命令的名称通常会引起误解。context.closePath不是的结尾定界符context.beginPath。再次，该closePath命令画一条线-它不会“关闭” a beginPath。