本文介绍了如何使用Canvas基础绘制函数结合贝塞尔曲线工具来创建非标准形状。通过设置控制点，可以绘制出任意形状的椭圆。文章展示了贝塞尔曲线工具的效果图，解释了绘制思路，包括设置画布中心、背景网格以及鼠标拖动事件处理，以实时更新控制点位置和画布上的曲线形状。最后，提到了代码实现部分。
Canvas 基础绘制例子二-贝塞尔曲线工具
博主wx: -GuanEr-，加博主进前端交流群
Canvas 提供的基础绘制函数绘制出的形状都是比较标准的，如果我们想要用 Canvas 绘制出一个非标准形状的形状，比如任意形状的椭圆，我们就需要使用贝塞尔曲线去绘制。
在使用贝塞尔曲线工具时，我们要知道一个曲线的控制点位置，才能绘制出对应的曲线，我们可以根据我们的绘制习惯，制作出一个贝塞尔曲线工具，然后利用这个工具去获取任意曲线的控制点位置。
一、效果图
二、思路
为了能让我们的工具更贴近生活，我们可以将画布的中心点设置成 (0,0) 点（当然也可以不设置）。
我们需要背景网格，来大致确定水平线和竖直线，背景网格绘制是以画布左上角为 (0, 0) 点来绘制。
鼠标在画布上拖动时，我们要要为鼠标绑定拖动事件，当鼠标在四个控制点上拖动时，控制点
订阅专栏 解锁全文
扫一扫
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
