创建 Canvas 径向（不是从内到外）渐变

Question

我需要画一个里面有渐变的圆

createRadialGradient() 正在创建从内到外的渐变，createLinearGradient() 正在创建从一侧到另一侧的渐变，但我需要创建如下图所示的内容。

谁能帮我解决这个问题？

Answer 1

您可以填充形状的所有像素，计算每个像素的颜色。或者只是画很多不同颜色的线条。我用的是第二种方式：

function drawAngleGradient(ctx, options){
    var delta = options.endAngle - options.startAngle;
    for(var angle = options.startAngle; angle < options.endAngle; angle += options.angleStep){
        var t = (angle - options.startAngle) / delta;
        drawLine(ctx, {
            start: options.center,
            end: [
                options.center[0] + options.radius * Math.cos(angle),
                options.center[1] + options.radius * Math.sin(angle)
            ],
            color: mixColors(options.startColor, options.endColor, t)
        });
    }
}

https://jsfiddle.net/vgeu3upz/

创建 Canvas 径向（不是从内到外）渐变

Create Canvas radial (not in to out) gradient

gradient

canvas

radial-gradients