【绘制】HTML5 Canvas绘画画板小项目：可编辑控制的贝塞尔曲线（可控制锚点和控制点的位置）

介绍

之前，我们说了贝塞尔曲线的绘制，但那个演示效果只是演示贝塞尔曲线但死页面，这节来实现一个可以编辑和控制的贝塞尔曲线。

在线演示  详细代码

代码解读

在详细代码中，综合了直线、圆弧、阴影、背景网格线、辅助线等之前的Demo，也利用了拖拽、绘图表面的保存恢复等之前的原理，这里不再过多介绍。

现在阐述如何实现的可编辑贝塞尔曲线。

和之前实现拖拽效果的原理类似，通过不断地重绘下一时刻的图像。

不过这里要判断两个状态，当是绘制曲线状态时，鼠标移动事件处理器就会重绘曲线本身、控制端点和锚点，其中控制端点和锚点会随着曲线拉伸移动。当用户正在拖动端点和控制点时，应用程序会更新该点的位置，然后再重绘曲线本身和端点与控制点，（这里另一个端点和两个控制点不随着移动）。