5、HTML5 Canvas API 绘图全解析

HTML5 Canvas API 绘图全解析

1. 绘制基础线条与恢复上下文

在绘制线条时，当线条草图完成后，可通过调用 context.stroke 方法将其渲染到画布上。最后，要将上下文恢复到初始的干净状态，这样后续的画布操作就不会受到本次操作中应用的平移影响。以下是操作步骤：
1. 绘制线条草图。
2. 调用 context.stroke 方法渲染线条。
3. 恢复上下文到初始状态。

2. 路径的使用

路径在 HTML5 Canvas API 中可表示任何想要渲染的形状。绘制形状或路径时，首先要调用 beginPath 函数，它无需参数，用于告知画布开始新的形状描述，方便画布计算形状的内外部分，以便后续填充和描边。路径会跟踪当前位置，默认是原点，可通过绘图例程修改。以下是常用的路径函数：
- moveTo(x, y) ：将当前位置移动到新的 (x, y) 位置，不进行绘制。
- lineTo(x, y) ：将当前位置移动到新的 (x, y) 位置，并从当前位置到新位置绘制一条直线。
- closePath ：行为与 lineTo 类似，但目标位置自动假定为路径的起始点，同时告知画布当前形状已闭合。

为了更好地理解，下面是一个绘制松树树冠路径的示例代码：