JavaScript Canvas Gradient создает размытый цвет ⇐ CSS

[Anonymous]

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

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

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);
< /code>
< /div>
< /div>
< /p>
Однако, если вы увеличиваете одну из этих жестких остановок, вы получите очень размытый переход между цветами, когда это должно быть мгновенное изменение: < /p>
[img]https://code.jquery.com/jquery-3.2.1.min.js[/img]






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');

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


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