Javascript Canvas Gradient erzeugt verschwommene Farbstopps ⇐ CSS

[Anonymous]

Ich habe versucht, mit der HTML Canvas API einen linearen Farbverlauf zu erstellen. Ich möchte jedoch mehrere „harte Stopps“ in den Farbverlauf integrieren, um direktere Übergänge zwischen Farbgruppen zu ermöglichen. Dies ist der Code, den ich geschrieben habe, der mithilfe der Canvas-API einen Farbverlauf generiert:

Code: Select all

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

Wenn Sie jedoch auf einen dieser harten Stopps zoomen, erhalten Sie einen sehr verschwommenen Übergang zwischen den Farben, obwohl es sich um einen sofortigen Wechsel handeln sollte:


Hier ist der gleiche Farbverlauf generiert mit dem linearen Gradienten von CSS:

Code: Select all

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

Wenn Sie hier hineinzoomen, erhalten Sie einen perfekten Übergang zwischen den Farben:


Hier ist meine Frage: Gibt es eine Möglichkeit, mit der ich einen harten Stopp erzielen kann? Canvas-Verlauf erstellen, ohne dass die Übergänge verschwimmen?
Zur Verdeutlichung muss ich in dieser Situation Canvas verwenden, da ich es am Ende mit ctx.getImageData() nach ImageData exportieren werde, um es in einer WebGL-Textur zu verwenden.
Ich freue mich über jede Hilfe im Voraus.