Распределите цвета градиента холста равномерно с произвольной цветовой гаммой - PullRequest
Новая
       36

Распределите цвета градиента холста равномерно с произвольной цветовой гаммой

1 голос
/ 21 июня 2019

Я пытаюсь распределить линейный градиент 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);

Эта проблема с этим в том, что это даже не так.Это неизбежно заканчивается более длинным градиентом в конце.Как я могу рассчитать процент, к которому градиент является событием по прямоугольнику.

1 Ответ

1 голос
/ 21 июня 2019

вам нужно изменить формулу на 

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

потому что индекс идет от 0 до colors.length-1 включительно.

Таким образом, каждый переход получит одинаковое количество пикселей.

...