在给定任意颜色范围的情况下均匀分布画布渐变颜色

Question

我正在尝试在给定随机颜色范围的情况下均匀分布canvas 线性渐变。像这样。

let canvas = document.getElementsByTagName("CANVAS")[0];
let ctx = canvas.getContext("2d");

let gradient = ctx.createLinearGradient(0, 0, 200, 0);

// generate some random colors
let random = Math.round(Math.random() * (10 - 2) + 2)
let colors = Array.from( Array( random ).keys() ).map(function(){
    return '#'+Math.floor(Math.random()*16777215).toString(16);
});

// loop through the colors and add color stop with percentage. 
colors.forEach( (color, index) => {
    let percentage = (index / colors.length) / 1;
    console.log(percentage);
    gradient.addColorStop(percentage, color);
})

ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

这个问题是它不均匀。它最终不可避免地会以更长的梯度结束。如何计算渐变在矩形中的百分比。

Answer 1

您需要将公式更改为

let percentage = index / (colors.length - 1);

因为索引从 0 变为 colors.length-1（含）。

这样每个过渡都会获得相同数量的像素。