js贝塞尔曲线算法，js贝塞尔曲线路径点

JavaScript021

js贝塞尔曲线算法，js贝塞尔曲线路径点,第1张

//anchorpoints：贝塞尔基点

        //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()

}