Javascript Canvas Gradient создает размытые цветовые остановки ⇐ CSS

[Anonymous]

Я пытался создать линейный градиент с помощью HTML Canvas API. Однако я хочу интегрировать в градиент несколько «жестких остановок», чтобы обеспечить более быстрые переходы между цветовыми группами. Это написанный мной код, который будет генерировать градиент с использованием Canvas API:

Код: Выделить всё

var colors = [
'rgb(116, 78, 173)',
'rgb(147, 141, 117)',
'rgb(150, 145, 83)',
'rgb(210, 212, 180)',
'rgb(204, 207, 180)',
'rgb(65, 91, 158)',
'rgb(67, 97, 162)',
'rgb(106, 208, 225)',
'rgb(111, 214, 232)',
'rgb(53, 213, 91)',
'rgb(17, 213, 24)',
'rgb(9, 94, 9)',
'rgb(29, 104, 9)',
'rgb(234, 210, 4)',
'rgb(255, 226, 0)',
'rgb(255, 128, 0)',
'rgb(255, 0, 0)',
'rgb(113, 0, 0)',
'rgb(255, 255, 255)',
'rgb(255, 146, 255)',
'rgb(255, 117, 255)',
'rgb(225, 11, 227)',
'rgb(178, 0, 255)',
'rgb(99, 0, 214)',
'rgb(5, 236, 240)',
'rgb(1, 32, 32)',
'rgb(1, 32, 32)',
'rgb(1, 32, 32)'
]
var values = [
-30, -20,
-20, -10,
-10, 10,
10, 18,
18, 22,
22, 35,
35, 40,
40, 50,
50, 60,
60, 65,
65, 70,
70, 75,
75, 85,
85,
95
]

var canvasElem = document.getElementById('grad');
canvasElem.width = (window.innerWidth - 50);
canvasElem.height = 100;
var ctx = canvasElem.getContext('2d');
ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);
var grdt = ctx.createLinearGradient(0, 0, canvasElem.width, 0);
var cmax = values[values.length - 1];
var cmin = values[0];
var clen = colors.length;

for (var i = 0; i < clen; i++) {
grdt.addColorStop((values[i] - cmin) / (cmax - cmin), colors[i]);
}

ctx.fillStyle = grdt;
ctx.fillRect(0, 0, canvasElem.width, canvasElem.height);

Однако, если вы увеличите масштаб одной из этих жестких остановок, вы получите очень размытый переход между цветами, хотя это должно быть мгновенное изменение:


Вот тот же градиент, созданный с использованием линейного градиента CSS:

Код: Выделить всё

var colors = [
'rgb(116, 78, 173)',
'rgb(147, 141, 117)',
'rgb(150, 145, 83)',
'rgb(210, 212, 180)',
'rgb(204, 207, 180)',
'rgb(65, 91, 158)',
'rgb(67, 97, 162)',
'rgb(106, 208, 225)',
'rgb(111, 214, 232)',
'rgb(53, 213, 91)',
'rgb(17, 213, 24)',
'rgb(9, 94, 9)',
'rgb(29, 104, 9)',
'rgb(234, 210, 4)',
'rgb(255, 226, 0)',
'rgb(255, 128, 0)',
'rgb(255, 0, 0)',
'rgb(113, 0, 0)',
'rgb(255, 255, 255)',
'rgb(255, 146, 255)',
'rgb(255, 117, 255)',
'rgb(225, 11, 227)',
'rgb(178, 0, 255)',
'rgb(99, 0, 214)',
'rgb(5, 236, 240)',
'rgb(1, 32, 32)',
'rgb(1, 32, 32)',
'rgb(1, 32, 32)'
]
var values = [
-30, -20,
-20, -10,
-10, 10,
10, 18,
18, 22,
22, 35,
35, 40,
40, 50,
50, 60,
60, 65,
65, 70,
70, 75,
75, 85,
85,
95
]

var canvasElem = document.getElementById('grad');
canvasElem.width = (window.innerWidth - 50);
canvasElem.height = 100;
var cmax = values[values.length - 1];
var cmin = values[0];
var clen = colors.length;

var gradColors = '';
for (var i = 0; i < clen;  i++) {
var curPercent = (((values[i] - cmin) / (cmax - cmin)) * 100);
gradColors += `${colors[i]} ${curPercent}%`;
if (!(i == clen - 1)) { gradColors += ',\n' }
}

$('')
.prop('type', 'text/css')
.html(`
#grad {
background: linear-gradient(
to right,
${gradColors}
);
}`)
.appendTo('head');

Здесь, если вы увеличите масштаб, вы получите идеальный переход между цветами:


Вот мой вопрос: Есть ли способ сделать жесткий прекратить использовать градиент холста, не делая переходы размытыми?
Чтобы уточнить: в этой ситуации мне действительно нужно использовать холст, потому что в конечном итоге я буду экспортировать его в ImageData с помощью ctx.getImageData() для использования в текстуре WebGL.
Я заранее ценю любую помощь.>

Подробнее здесь: https://stackoverflow.com/questions/743 ... olor-stops