创建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/