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（包括两端）。

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

在任意颜色范围内均匀分配画布渐变颜色

1 个答案: