时间戳

首页 > 解决方案 > 创建画布径向（不是从内到外）渐变

canvas - 创建画布径向（不是从内到外）渐变

问题描述

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

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

谁能帮我这个？ 在此处输入图像描述

标签： canvasgradientradial-gradients

解决方案

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

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/

推荐阅读