Question

使用Canvas实现贝塞尔曲线显示以及控制

Answer 1

贝塞尔曲线

场景：

创建简易的绘图工具，实现控制画布上的四个锚点的拖拽修改已经绘制的曲线图，通过注释实时显示锚点的具体实时坐标，并通过反色清楚的显示控制点的位置

要求：
　　1. 创建一个512*512的canvas画布
　　2. 在该画布上任意创建四个锚点，使用贝塞尔曲线进行连接
　　3. 可在画布上自由拖拽上面的锚点，从而实现贝塞尔曲线的联动，每个点都有一个跟随点移动的注释（文字+箭头），说明该点的坐标
　　4.在此基础上，实现一个黑白渐变色的背景，然后在锚点周围20个像素内，将锚点所处的背景作反色，突出锚点的显示

明确:

贝塞尔曲线通过canvas绘制,canvas自带贝塞尔曲线绘制方法 bezierCurveTo()

显示锚点可以在canvas上覆盖div 将锚点放在div中

锚点拖动,添加事件监听, 鼠标按下 为被点击的锚点 添加鼠标移动事件,松开 注销鼠标移动事件

拖动锚点时要做什么?

修改注释内的坐标

canvas根据锚点坐标重绘贝塞尔曲线

锚点周围20像素背景色取反