//pointsAmount：生成的点数
//return 路径点的Array
function CreateBezierPoints(anchorpoints, pointsAmount) {
var points = []
for (var i = 0i <pointsAmounti++) {
var point = MultiPointBezier(anchorpoints, i / pointsAmount)
points.push(point)
}
return points
}
function MultiPointBezier(points, t) {
var len = points.length
var x = 0, y = 0
var erxiangshi = function (start, end) {
var cs = 1, bcs = 1
while (end >0) {
cs *= start
bcs *= end
start--
end--
}
return (cs / bcs)
}
for (var i = 0i <leni++) {
var point = points[i]
x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i))
y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i))
}
return { x: x, y: y }
}
以上是计算高阶贝赛尔曲线所有点的方法，
方法引用了引用公式
：
一次、二次、三次贝塞尔曲线函数
function onebsr(t, a1, a2) {
return a1 + (a2 - a1) * t
}
function twobsr(t, a1, a2, a3) {
return ((1 - t) * (1 - t)) * a1 + 2 * t * (1 - t) * a2 + t * t * a3
}
function threebsr(t, a1, a2, a3, a4) {
return a1 * (1 - t) * (1 - t) * (1 - t) + 3 * a2 * t * (1 - t) * (1 - t) + 3 * a3 * t * t * (1 - t) + a4 * t * t * t
}
参考 https://www.cnblogs.com/lxiang/p/4995255.html
<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()
}
