如何用渐变填充圆的每个部分？

Question

请看这个脚本：

http://jsfiddle.net/HR5BD/

var c=document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.lineWidth=6;

var partLength = (2 * Math.PI) / 24;
var start = 0;
var radius = 63;
var gradient;

for (var i=0 ; i<24 ; i++) {
    ctx.beginPath();

    gradient = ctx.createLinearGradient(0,0,170,0);
    gradient.addColorStop('0', '#00ff00');
    gradient.addColorStop('0.8', '#ff0000');

    ctx.strokeStyle = gradient;
    ctx.arc(radius + 10, radius + 10, radius, start, start+partLength);

    ctx.stroke();
    ctx.closePath();

    start += partLength;
}

我将圆圈分成了24个部分，以制作某种手表。之后，我想添加圆圈的每个部分渐变。我怎样才能做到这一点？我试过的每一种方式都用渐变填满整个圆圈。而且我需要在圆的每个部分分别具有相同的渐变。它一定是可能的，但我没有更多的想法，我怎么能这样做。

谢谢！

Answer 1

您可以在数组中处理所需的所有颜色。

然后，对于每个切片，您必须计算：

• 渐变开始的（x，y）
• 渐变结束的（x，y）
• 此渐变的开始/结束颜色。

因为我们使用线性渐变，所以圆圈将是-for 它的颜色 - 接近尽可能多的线条 颜色。

但即使只有5种颜色，结果还可以：

小提琴在这里：
  http://jsfiddle.net/gamealchemist/CCmV4/

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

function drawMultiRadiantCircle(xc, yc, r, radientColors) {
    var partLength = (2 * Math.PI) / radientColors.length;
    var start = 0;
    var gradient = null;
    var startColor = null,
        endColor = null;

    for (var i = 0; i < radientColors.length; i++) {
        startColor = radientColors[i];
        endColor = radientColors[(i + 1) % radientColors.length];

        // x start / end of the next arc to draw
        var xStart = xc + Math.cos(start) * r;
        var xEnd = xc + Math.cos(start + partLength) * r;
        // y start / end of the next arc to draw
        var yStart = yc + Math.sin(start) * r;
        var yEnd = yc + Math.sin(start + partLength) * r;

        ctx.beginPath();

        gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
        gradient.addColorStop(0, startColor);
        gradient.addColorStop(1.0, endColor);

        ctx.strokeStyle = gradient;
        ctx.arc(xc, yc, r, start, start + partLength);
        ctx.lineWidth = 8;
        ctx.stroke();
        ctx.closePath();

        start += partLength;
    }
}


var someColors = [];

someColors.push('#0F0');
someColors.push('#0FF');
someColors.push('#F00');
someColors.push('#FF0');
someColors.push('#F0F');

drawMultiRadiantCircle(150, 150, 120, someColors);