Создать холст радиальный (не в, чтобы) градиент

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/