HTML5：ここ割合

Question

により、円/弧を埋めるには、私の擬似コードです：

var percentage = 0.781743; // no specific length 
var degrees = percentage * 360.0; 
var radians = degrees * Math.PI/180.0; 

var x = 50; 
var y = 50; 
var r = 30; 
var s = 1.5 * Math.PI; 

var context = canvas.getContext('2d'); 
context.beginPath(); 
context.lineWidth = 5; 
context.arc(x, y, r, s, radians, false); 
context.closePath(); 
context.stroke(); 

私は私が作る形状を制御し、必要に応じて再描画するKineticJSライブラリを使用しています。私の問題は、上記のコードはまったく動作しないということです。私は、もし私がradiansのようなものに変更すると、数学が正しくないと仮定します。4.0 * Math.PIは円全体を描きます。

私は参考としてHTML5 Canvas Arc Tutorialを使用しています。

Answer 1

コードはうまく動作しますが、開始角度はゼロでなければなりません。ここで働いているコード：

http://jsfiddle.net/HETvZ/

は、私はあなたの混乱が始まる角度が何からだと思います。その時点で開始され、endAngleラジアンが追加されたことを意味するわけではありません。これは、その点で角度が始まり、endAngleラジアンポイントで終わることを意味します。

startAngleが1.0でendAngleが1.3の場合、円弧は0.3ラジアンにすぎません。

あなたはそれはあなたが考えているように動作するようにしたい場合は、あなたがあなたのendAngleにstartAngleのを追加する必要があるとしている。この例のように

context.arc(x, y, r, s, radians+s, false); 

を：http://jsfiddle.net/HETvZ/5/

Answer 2

あなたのコードされますちょうど良い。あなたは次のものを持っている必要があります： s = 0つまり、出発点はゼロでなければなりません。 円を描画したい場合は、次のようにします。 context.rotate（-90 * Math.PI/180）; しかし、回転した後、arc（）のx、y引数をチェックする必要があります。私はそれが好きで使用：

context.rotate(90 * Math.PI/180); 
context.fillStyle = '#1aa8ff'; 
context.textAlign = 'center'; 
context.font = "bold 76px Verdana";; 
context.textBaseline = "middle"; 
context.fillText("50%", 200, 200); 

：私は私がやったように、テキスト形式で比率を表示するために必要なこの後

context.rotate(-90 * Math.PI/180); 
context.arc(-200, 200, 150, startPoint, radian, false); 
context.lineWidth = 20; 
context.strokeStyle = '#b3e5fc'; 
context.stroke(); 
context.closePath();