6

これが私の擬似コードです：

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、円全体が描画されるからです。

参考までにHTML5CanvasArcチュートリアルを使用しています。

4

2 に答える 2

11

あなたのコードはうまく機能しますが、あなたはあなたが期待するものを得るためにゼロであるべきである開始角度を持っています。動作するコードは次のとおりです。

http://jsfiddle.net/HETvZ/

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

したがって、startAngleが1.0でendAngleが1.3の場合、0.3ラジアンの弧しか表示されません。

考えているとおりに機能させたい場合は、startAngleをendAngleに追加する必要があります。

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

この例のように：http：//jsfiddle.net/HETvZ/5/

于 2012-01-19T19:25:18.387 に答える
0

あなたのコードは大丈夫です。s = 0、つまり開始点はゼロでなければなりません。円を上から描画し始めたい場合は、次を使用できます。context.rotate（-90 * Math.PI / 180）; ただし、回転した後は、arc（）のsx、y引数を確認する必要があります。私はそれを次のように使用しました：

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

この後、パーセンテージをテキスト形式で表示する必要があったので、次のようにしました。

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);
于 2017-07-17T19:12:57.020 に答える