Canvas 基础绘制例子二-贝塞尔曲线工具

Canvas 基础绘制例子二-贝塞尔曲线工具

博主wx: -GuanEr-，加博主进前端交流群

Canvas 提供的基础绘制函数绘制出的形状都是比较标准的，如果我们想要用 Canvas 绘制出一个非标准形状的形状，比如任意形状的椭圆，我们就需要使用贝塞尔曲线去绘制。

在使用贝塞尔曲线工具时，我们要知道一个曲线的控制点位置，才能绘制出对应的曲线，我们可以根据我们的绘制习惯，制作出一个贝塞尔曲线工具，然后利用这个工具去获取任意曲线的控制点位置。

一、效果图

二、思路

为了能让我们的工具更贴近生活，我们可以将画布的中心点设置成 (0,0) 点（当然也可以不设置）。

我们需要背景网格，来大致确定水平线和竖直线，背景网格绘制是以画布左上角为 (0, 0) 点来绘制。

鼠标在画布上拖动时，我们要要为鼠标绑定拖动事件，当鼠标在四个控制点上拖动时，控制点的绘制要跟随鼠标。

将控制点的坐标绘制在画布上，每当控制点的位置发生变化时，画布上的位置也随之变化，方便我们取值。

三、代码实现

&l