javascript怎么画贝塞尔曲线

<script type="text/javascript">

window.onload = function(){

var c = document.getElementById("myCanvas")

var content = c.getContext("2d")

//绘制二次方贝塞尔曲线

content.strokeStyle ="#FF5D43"

content.beginPath()

content.moveTo(0,200)

content.quadraticCurveTo(75,50,300,200)

content.stroke()

content.globalCompositeOperation = "source-over" //目标图像上显示源图像

//绘制上面曲线的控制点和控制线，控制点坐标为两直线的交点(75,50)

content.strokeStyle = "#f0f"

content.beginPath()

content.moveTo(75,50)

content.lineTo(0,200)

content.moveTo(75,50)

content.lineTo(300,200)

content.stroke()

}

有一种动画是跟着一条轨迹走的，又叫曲线动画，曲线有很多种，最著名的是 贝塞尔曲线 。什么是贝塞尔曲线，最简单的就是你用photoshop的钢笔工具画出来的曲线就是贝塞尔曲线。

曲线的核心定义： 起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。

贝塞尔曲线是分阶数的。

一阶贝塞尔曲线：

二阶贝塞尔曲线：

看到这里，应该明白贝塞尔曲线是怎么回事了。图中绿色的是曲线的切线。

三阶贝塞尔曲线：

高阶贝塞尔曲线：

看图非常的复杂，看公式的推导：

拿二阶的曲线公式来说是这样的：

看起来很复杂，把它拆分开来看：

B0 和 B1分别是 P0 到 P1 和 P1到 P2 的 1 阶贝塞尔曲线。而 2 阶贝塞尔曲线 B 就是 B0 到 B1 的 1 阶贝塞尔曲线。这样理解起来应该比较好理解。

然而还是很复杂，看 n 阶贝塞尔曲线的推导公式：

给定点 P0 、 P1 、…、 Pn ，其贝塞尔曲线即：

可以用下面的递归表达：

用

术语

一些关于参数曲线的术语，有

即多项式

又称作 n 阶的 伯恩斯坦基底多项式 ，定义0的0次方 = 1。

点 Pi 称作贝塞尔曲线的 控制点 。 多边形 以带有 线 的贝塞尔点连接而成，起始于 P0

并以 Pn 终止，称作 贝塞尔多边形 （或 控制多边形 ）。贝塞尔多边形的 凸包 （convex hull）包含有贝塞尔曲线。

因为贝塞尔曲线公式里有时间，而且在高中大学都没学过，所有理解起来比较困难。真是艺术般的曲线。

参考：

http://my.oschina.net/ososchina/blog/677307

http://blog.csdn.net/vrix/article/details/39206975

http://blog.csdn.net/tianjian4592/article/details/47067161

http://www.2cto.com/kf/201503/380377.html

http://blog.csdn.net/androidzhaoxiaogang/article/details/8680330

http://blog.csdn.net/linmiansheng/article/details/18763987

1.要绘制贝塞尔线，我们需要四个点： 起点 ， 终点 和 两个控制点 ，如下图所示。移动控制点会改变曲线的斜率。您可以在此 在线工具中 使用控制点。

我们可以使用类Path的cubicTo方法绘制贝塞尔曲线：

使用控制点（x1，y1）和（x2，y2）添加从当前点到给定点（x3，y3）的曲线的三次贝塞尔曲线段。

如您所见，该cubicTo方法接受三个参数。其中两个是控制点，最后一个参数是终点。起点是您的笔已经位于画布上的位置。

不要忘记在画布坐标中，左上角是（0,0）点，右下角是（size.width，size.height）。因此，请尝试相应地调整四点：

请记住，paint对象就像我们的笔，我们将其颜色设置为蓝色，宽度设置为3。

我们用path对象描述了bezier路径。该moveTo方法已用于将笔移动到路径的起​​点。然后我们调用cubicTo方法来定义控制点和终点。之后，我们使用该drawPath方法绘制了路径。

贝塞尔曲线参考:

https://www.jianshu.com/p/90be43fc7bee

///推荐一些曲线图/折线图/柱状图参考:

https://blog.csdn.net/sxt_zls/article/details/89419092

https://www.codercto.com/a/45868.html

https://zhuanlan.zhihu.com/p/48207046

https://blog.csdn.net/qq_17766199/article/details/95632571?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2 all first_rank_v2~rank_v25-2-95632571.nonecase&utm_term=flutter%20%E5%8A%A8%E6%80%81%E7%BB%98%E5%88%B6%E6%9B%B2%E7%BA%BF

---