如何用HTML5画布将圆圈分成三个相等的部分？

Question

如何使用HTML5 canvas 2D上下文API将圆圈分成三个相等的部分,如上图所示？

我正在尝试这个

有人可以提出更好的方法吗？可能是百分比(或以度为单位)而不是硬编码坐标？

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();

Answer 1

这是一个函数(演示),允许您以度为单位指定起点,长度和角度:

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();
}