Làm thế nào để vẽ đường cong Bezier với mã Javascript gốc mà không cần ctx.bezierCurveTo?

Question

Tôi cần vẽ và nhận tọa độ đường cong bezier của từng bước với Javascript gốc mà không có phương thức ctx.bezierCurveTo.

Tôi tìm thấy một số tài nguyên, nhưng tôi đã nhầm lẫn. Esspecially this trông khá gần, nhưng tôi không thể triển khai rõ ràng.

Tôi làm cách nào để thực hiện việc này?

Answer 1

Bạn có thể vẽ ra Bezier:

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

Dưới đây là một fiddle http://jsfiddle.net/fQYsU/