Tengo un código javascript para generar un degradado de 14 colores:
var example = document.getElementById('example'); var context = example.getContext('2d'); var grdBnds = [0, 0, 200, 30] var grd = context.createLinearGradient(grdBnds[0], grdBnds[1], grdBnds[2], grdBnds[3]); grd.addColorStop((1/14)*0, "rgb(0, 0, 0)"); grd.addColorStop((1/14)*1, "rgb(191, 191, 191)"); grd.addColorStop((1/14)*2, "rgb(115, 115, 115)"); grd.addColorStop((1/14)*3, "rgb(245, 182, 181)"); grd.addColorStop((1/14)*4, "rgb(147, 252, 253)"); grd.addColorStop((1/14)*5, "rgb(87, 120, 246)"); grd.addColorStop((1/14)*6, "rgb(177, 251, 162)"); grd.addColorStop((1/14)*7, "rgb(80, 176, 51)"); grd.addColorStop((1/14)*8, "rgb(230, 230, 75)"); grd.addColorStop((1/14)*9, "rgb(187, 109, 93)"); grd.addColorStop((1/14)*10, "rgb(235, 51, 35)"); grd.addColorStop((1/14)*11, "rgb(188, 39, 246)"); grd.addColorStop((1/14)*12, "rgb(117, 20, 124)"); grd.addColorStop((1/14)*13, "rgb(191, 191, 191)"); context.fillStyle = grd; context.fillRect(grdBnds[0], grdBnds[1], grdBnds[2], grdBnds[3]); <canvas id="example" width="1000" height="400"></canvas>Como puede ver, las líneas de degradado se generan en un ángulo diagonal hacia la derecha, cuando deberían ser verticales.
¿Alguien sabe por qué sucede esto y cómo podría solucionarlo?
Se que también puedes hacer degradados con CSS, pero para lo que estoy haciendo necesito hacer los degradados verticales con canvas .
Los parámetros para createLinearGradient y fillRect son dos cosas diferentes.
var example = document.getElementById('example'); var context = example.getContext('2d'); var grdBnds = [0, 0, 000, 240] var rectBnds = [0, 0, 360, 240] var grd = context.createLinearGradient(grdBnds[0], grdBnds[1], grdBnds[2], grdBnds[3]); grd.addColorStop((1 / 14) * 0, "rgb(0, 0, 0)"); grd.addColorStop((1 / 14) * 1, "rgb(191, 191, 191)"); grd.addColorStop((1 / 14) * 2, "rgb(115, 115, 115)"); grd.addColorStop((1 / 14) * 3, "rgb(245, 182, 181)"); grd.addColorStop((1 / 14) * 4, "rgb(147, 252, 253)"); grd.addColorStop((1 / 14) * 5, "rgb(87, 120, 246)"); grd.addColorStop((1 / 14) * 6, "rgb(177, 251, 162)"); grd.addColorStop((1 / 14) * 7, "rgb(80, 176, 51)"); grd.addColorStop((1 / 14) * 8, "rgb(230, 230, 75)"); grd.addColorStop((1 / 14) * 9, "rgb(187, 109, 93)"); grd.addColorStop((1 / 14) * 10, "rgb(235, 51, 35)"); grd.addColorStop((1 / 14) * 11, "rgb(188, 39, 246)"); grd.addColorStop((1 / 14) * 12, "rgb(117, 20, 124)"); grd.addColorStop((1 / 14) * 13, "rgb(191, 191, 191)"); context.fillStyle = grd; context.fillRect(rectBnds[0], rectBnds[1], rectBnds[2], rectBnds[3]); <canvas id="example" width="1000" height="400"></canvas>createLinearGradient genera un degradado a partir de dos puntos, (x0,y0) y (x1, y1). Es por eso que toma cuatro parámetros.
fillStyle define el color, degradado o patrón utilizado por fillRect para llenar su rectángulo. Estás usando degradado aquí.
fillRect toma cuatro parámetros: x , y , width y height .
Aquí hay un fragmento que usa las dimensiones del lienzo para establecer los diferentes parámetros.
var canvas = document.getElementById('example'); var context = canvas.getContext('2d'); var colors = [ "rgb(0, 0, 0)", "rgb(191, 191, 191)", "rgb(115, 115, 115)", "rgb(245, 182, 181)", "rgb(147, 252, 253)", "rgb(87, 120, 246)", "rgb(177, 251, 162)", "rgb(80, 176, 51)", "rgb(230, 230, 75)", "rgb(187, 109, 93)", "rgb(235, 51, 35)", "rgb(188, 39, 246)", "rgb(117, 20, 124)", "rgb(191, 191, 191)" ]; // Horizontally var grd = context.createLinearGradient(0, 0, canvas.width, 0); // Vertically var grd = context.createLinearGradient(0, 0, 0, canvas.height); for (let index = 0; index < colors.length; index++) { const color = colors[index]; grd.addColorStop(index/colors.length, color); } context.fillStyle = grd; context.fillRect(0, 0, canvas.width, canvas.height); <canvas id="example" width="1000" height="400"></canvas>