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

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)
• 此渐变的开始/结束颜色。

因此，由于我们使用线性渐变，圆形将 - 对于它的颜色 - 近似为与颜色一样多的线条。

但即使只有 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);