贝塞尔曲线_初探

Mark
参考: https://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html
简单运用:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    二次贝塞尔曲线: 公式;
    起点: P0;
    终点: p2;
    控制点: p1;
    曲线长度比例: t;
    <br/>
    B(t) = (1 - t)^2 * P0 + 2 * t * (1 - t) * P1 + t^2 * P2;
    
    <br/><br/><br/>
    三次贝塞尔曲线: 公式;
    起点: P0;
    终点: p3;
    控制点1: p1;
    控制点2: p2;
    曲线长度比例: t;
    <br/>
    B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1]
    <script>
        function curve( t, p0, p1, p2) {
            var point = Point( 0, 0 );
            var temp = 1 - t;
            point.x = temp * temp * p0.x + 2 * t * temp * p1.x + t * t * p2.x;
            point.y = temp * temp * p0.y + 2 * t * temp * p1.y + t * t * p2.y;
            return point;
        }
        
        /**
         * 三阶贝塞尔曲线
         * B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1]
         *
         * @param t  曲线长度比例
         * @param p0 起始点
         * @param p1 控制点1
         * @param p2 控制点2
         * @param p3 终止点
         * @return t对应的点
         */
        function curve3( t, p0, p1, p2, p3) {
            var point = Point( 0, 0 );
            var temp = 1 - t;
            point.x = p0.x * temp * temp * temp + 3 * p1.x * t * temp * temp + 3 * p2.x * t * t * temp + p3.x * t * t * t;
            point.y = p0.y * temp * temp * temp + 3 * p1.y * t * temp * temp + 3 * p2.y * t * t * temp + p3.y * t * t * t;
            return point;
        }
        
        function Point(x, y) { 
            return {x: x, y: y} 
        }

        var p0 = {x: 150, y: 50};
        var p1 = {x: 0, y: 150};
        var p2 = {x: 200, y: 500};

        var ps = [];
        var cy = 16;
        for (var i = 0; i < cy; i++) {
            ps.push( curve(i / cy, p0, p1, p2) );
        }

        var canvas = document.createElement('canvas');
        canvas.width = 1000;
        canvas.height = 600;
        var context = canvas.getContext('2d');

        context.moveTo(ps[0].x, ps[0].y);
        for(var i = 1; i < ps.length; i++) {
            context.lineTo(ps[i].x, ps[i].y);
        }
        context.stroke();

        document.body.appendChild(canvas);
    </script>
</body>
</html>
附: 二阶贝塞尔曲线公式推导过程: