2

ここに画像の説明を入力

上の図のように、HTML5 キャンバス 2D コンテキスト API で円を 3 等分するにはどうすればよいですか?

私はこれを試していました

誰かがより良い方法を提案できますか? ハードコードされた座標ではなく、おそらくパーセンテージ（または度）で？

var can = document.getElementById('mycanvas');
var ctx = can.getContext('2d');

ctx.fillStyle = "#BD1981";
ctx.beginPath();
ctx.arc(200, 200, 150, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

ctx.strokeStyle = "#FFC8B2";
ctx.lineWidth = "2";
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(350, 200);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(100, 300);
ctx.closePath();
ctx.stroke();
4

3 に答える 3

8

これは、開始点、長さ、角度を度単位で指定できる関数 (デモ)です。

var drawAngledLine = function(x, y, length, angle) {
    var radians = angle / 180 * Math.PI;
    var endX = x + length * Math.cos(radians);
    var endY = y - length * Math.sin(radians);

    ctx.beginPath();
    ctx.moveTo(x, y)
    ctx.lineTo(endX, endY);
    ctx.closePath();
    ctx.stroke();
}
于 2012-09-26T09:02:35.120 に答える
2

すべてをまとめる (@phant0m を使用drawAngledLine):

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var RADIUS = 70;

function drawCircle(x, y, r) {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.stroke();
}

function drawAngledLine(x, y, length, angle) {
    var radians = angle / 180 * Math.PI;
    var endX = x + length * Math.cos(radians);
    var endY = y - length * Math.sin(radians);
    ctx.beginPath();
    ctx.moveTo(x, y)
    ctx.lineTo(endX, endY);
    ctx.closePath();
    ctx.stroke();
}

drawCircle(140, 140, RADIUS);
drawAngledLine(140, 140, RADIUS, 1 * (360 / 3));
drawAngledLine(140, 140, RADIUS, 2 * (360 / 3));
drawAngledLine(140, 140, RADIUS, 3 * (360 / 3));

デモはこちら:

于 2014-01-16T19:28:14.357 に答える