使用貝塞爾曲線

Question

我正在爲我的項目創建一個自定義方法，它將創建多邊形。 我有這樣的：

var c2 = document.getElementById('c').getContext('2d'); 
c2.fillStyle = '#f00'; 
c2.beginPath(); 
c2.moveTo(10, 20); 
c2.lineTo(20, 10); 
c2.lineTo(60, 10); 
c2.lineTo(60, 30); 
c2.lineTo(20, 30); 
c2.lineTo(10, 20); 
c2.closePath(); 
c2.fill(); 

現場演示：http://jsfiddle.net/yd7Wv/4292/ 現在，我需要用貝塞爾曲線，因爲我需要圓邊 你能幫助我與貝塞爾曲線，好嗎？ 最好的問候，丹尼爾

Answer 1

您可以繪製使用

canvas_context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); 

和

canvas_context.quadraticCurveTo(cpx, cpy, x, y); 

貝塞爾曲線這些文檔將幫助您

1. http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/
2. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

Answer 2

要麼使用bezierCurveTo方法已經實施：

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); 

http://www.w3schools.com/tags/canvas_beziercurveto.asp

或者你可以寫類似下面，其中有一個更大的逼近自己bazier曲線法：

coord = function (x,y) { 
    if(!x) var x=0; 
    if(!y) var y=0; 
    return {x: x, y: y}; 
} 

function B1(t) { return t*t*t } 
function B2(t) { return 3*t*t*(1-t) } 
function B3(t) { return 3*t*(1-t)*(1-t) } 
function B4(t) { return (1-t)*(1-t)*(1-t) } 

function getBezier(percent,C1,C2,C3,C4) { 
    var pos = new coord(); 
    pos.x = C1.x*B1(percent) + C2.x*B2(percent) + C3.x*B3(percent) + C4.x*B4(percent); 
    pos.y = C1.y*B1(percent) + C2.y*B2(percent) + C3.y*B3(percent) + C4.y*B4(percent); 
    return pos; 
}