canvas实现高阶贝塞尔曲线-木庄网络博客

本文摘自PHP中文网，作者小云云，侵删。

本文主要介绍了canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

写在最前

由于原生的Canvas最高只支持到三阶贝塞尔曲线，那么我想添加多个控制点怎么办呢？（即便大部分复杂曲线都可以用3阶贝塞尔来模拟）与此同时，关于贝塞尔控制点的位置我们很难非常直观的清楚到底将控制点设置为多少可以形成我们想要的曲线。本着解决以上两个痛点同时社区内好像并没有N阶的解决方案（js版）故这次作者非常认真的开源了bezierMaker.js！

bezierMaker.js理论上支持N阶贝塞尔曲线的生成，同时提供了试验场供开发者可以自行添加并拖拽控制点最终生成一组绘制动画。非常直观的让开发者知道不同位置的控制点所对应的不同生成曲线。

如果你喜欢这个作品欢迎Star，毕竟star来之不易。。

项目地址：这里???

为什么需要一个试验场？

在绘制复杂的高阶贝塞尔曲线时无法知道自己需要的曲线的控制点的精确位置。在试验场中进行模拟，可以实时得到控制点的坐标值，将得到的点坐标变为对象数组传递进BezierMaker类就可以生成目标曲线

效果图

功能

[x] 试验场可添加任意数量控制点
[x] 试验场支持展示曲线绘制的形成动画
[x] 控制点可自由拖拽
[x] 支持显示贝塞尔曲线形成过程的切线
[x] 3阶及以下贝塞尔曲线的绘制采用原生API

引入

1	`<script src="./bezierMaker.js"></script>`

绘制

上面的效果图为试验场的使用，当你通过试验场获得控制点的准确坐标之后，就可以调用bezierMaker.js进行曲线的直接绘制。

/**
 * canvas canvas的dom对象
 * bezierCtrlNodesArr 控制点数组，包含x，y坐标
 * color 曲线颜色
 */
var canvas = document.getElementById('canvas')
//3阶之前采用原生方法实现
var arr0 = [{x:70,y:25},{x:24,y:51}]
var arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]
var arr2 = [{x:23,y:225},{x:70,y:79},{x:40,y:51},{x:300, y:44}]
var arr3 = [{x:333,y:15},{x:70,y:79},{x:40,y:551},{x:170,y:279},{x:17,y:239}]
var arr4 = [{x:53,y:85},{x:170,y:279},{x:240,y:551},{x:70,y:79},{x:40,y:551},{x:170,y:279}]
var bezier0 = new BezierMaker(canvas, arr0, 'black')
var bezier1 = new BezierMaker(canvas, arr1, 'red')
var bezier2 = new BezierMaker(canvas, arr2, 'blue')
var bezier3 = new BezierMaker(canvas, arr3, 'yellow')
var bezier4 = new BezierMaker(canvas, arr4, 'green')
bezier0.drawBezier()
bezier1.drawBezier()
bezier2.drawBezier()
bezier3.drawBezier()
bezier4.drawBezier()