如何使用不带ctx.bezierCurveTo的原生Javascript代码绘制贝塞尔曲线？

Question

我需要绘制并获取每个步骤的贝塞尔曲线的坐标与本地JavaScript没有ctx.bezierCurveTo方法。

我发现了几个资源，但我很困惑。特别是this看起来非常接近，但我无法清楚地执行。

我该如何做到这一点？

Answer 1

您可以绘制出贝塞尔：

bezier = function(t, p0, p1, p2, p3){ 
    var cX = 3 * (p1.x - p0.x), 
     bX = 3 * (p2.x - p1.x) - cX, 
     aX = p3.x - p0.x - cX - bX; 

    var cY = 3 * (p1.y - p0.y), 
     bY = 3 * (p2.y - p1.y) - cY, 
     aY = p3.y - p0.y - cY - bY; 

    var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x; 
    var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y; 

    return {x: x, y: y}; 
}, 

(function(){ 
    var accuracy = 0.01, //this'll give the bezier 100 segments 
     p0 = {x: 10, y: 10}, //use whatever points you want obviously 
     p1 = {x: 50, y: 100}, 
     p2 = {x: 150, y: 200}, 
     p3 = {x: 200, y: 75}, 
     ctx = document.createElement('canvas').getContext('2d'); 

    ctx.width = 500; 
    ctx.height = 500; 
    document.body.appendChild(ctx.canvas); 

    ctx.moveTo(p0.x, p0.y); 
    for (var i=0; i<1; i+=accuracy){ 
    var p = bezier(i, p0, p1, p2, p3); 
    ctx.lineTo(p.x, p.y); 
    } 

    ctx.stroke() 
})() 

这里有一个小提琴http://jsfiddle.net/fQYsU/