Canvas路径与曲线教程，掌握路径绑制和贝塞尔曲线的使用方法。路径是Canvas绑制的核心概念。几乎所有复杂图形都需要通过路径来绑制，包括曲线、不规则形状等。
路径是由一系列点组成的线条集合。可以把路径想象成画笔的运动轨迹：
ctx.beginPath() // 开始新路径
// ... 绑制操作 ...
ctx.closePath() // 闭合路径（可选）
ctx.fill() // 填充
// 或
ctx.stroke() // 描边
Canvas支持两种贝塞尔曲线：
| 曲线类型 | 方法 | 控制点数量 | 用途 |
|---|---|---|---|
| 二次贝塞尔曲线 | quadraticCurveTo | 1个 | 简单曲线、抛物线 |
| 三次贝塞尔曲线 | bezierCurveTo | 2个 | 复杂曲线、S形曲线 |
使用路径绑制的折线图形
所有复杂形状都由路径组成：
路径操作
├── 直线类：moveTo, lineTo, closePath
├── 弧线类：arc, arcTo
├── 曲线类：quadraticCurveTo, bezierCurveTo
└── 矩形：rect（作为路径）
路径本身不会被保存，每次beginPath都会清除之前的路径：
// 错误示例
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.lineTo(100, 100)
ctx.stroke()
// 这里路径已被清除
ctx.lineTo(200, 100) // 无效，需要重新beginPath
ctx.stroke()
fill方法可以指定填充规则：
ctx.beginPath()
ctx.arc(100, 100, 50, 0, Math.PI * 2)
ctx.arc(100, 100, 30, 0, Math.PI * 2)
ctx.fill('evenodd') // 奇偶规则，形成圆环
两种填充规则：
| 规则 | 说明 | 效果 |
|---|---|---|
| nonzero | 非零环绕规则 | 默认，填充所有封闭区域 |
| evenodd | 奇偶规则 | 交替填充，适合镂空效果 |