變化角度

我創建使用Canvas半弧這裏我的查詢是我需要改變圓弧的整體角度按預期的圖像變化角度

預期影像

enter image description here

下面是半圓弧

<canvas id="myCanvas" width="578" height="250"></canvas>

JSFIDDLE LINK

HTML代碼

在此先感謝 Maha

來源

2014-07-17 user3820621

您將要使用bezierCurveTo函數。因爲你可能需要調整代碼才能準確找到你想要的曲線。

來源

2014-07-17 20:46:53 Jnatalzia

該曲線可以用context.quadraticCurveTo近似：http://jsfiddle.net/m1erickson/f8fDj/

// x,y are the left,top point of the arc 

function myCurve(x,y){  
    ctx.translate(x,y); 
    ctx.beginPath(); 
    ctx.moveTo(0,0); 
    ctx.quadraticCurveTo(85,18,150,0); 
    ctx.stroke(); 
    ctx.translate(-x,-y); 
}

來源

2014-07-17 21:34:02 markE

喜@markE感謝分享代碼，但我不希望像我想用帆布爲你能給我提供解決方案嗎 – user3820621

上面的'myCurve'函數在畫布上繪製圓弧。我只繪製了圖像，以便您可以正確地看到arc函數接近該圖像：http://jsfiddle.net/m1erickson/2yN9Y/; =） – markE

嗨@markE您的意思是說我需要將myCurve函數放入我的代碼中我需要調用代碼 – user3820621

感謝馬克的解決方案。

下面是解

var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d');  
myCurve(); 

function myCurve(x,y){  
    ctx.translate(x,y); 
    ctx.beginPath(); 
    ctx.moveTo(0,0); 
    ctx.quadraticCurveTo(85,18,150,0); 
    ctx.stroke(); 
    ctx.translate(-x,-y);

}

感謝&問候瑪哈

來源

2014-07-18 05:54:46 user3820621

回答

相關問題