Degradados con HTML5
https://engineerdesistemas.blogspot.com/2016/12/degradados-con-html5.html
Una rutina adicional que se puede trabajar utilizando canvas en HTML5 es la de realizar los degradados multicolores, como siempre la base es comprender que se parte de un enmarcado rectangular y dentro del enmarcado se puede trabajar trazos, círculos y en esta oportunidad degradados.
El código de un degrado vertical multicolor es así:
Y el resultado en pantalla es:
El código de un degrado vertical multicolor es así:
<!DOCTYPE html>
<html>
<head>
<title>Degradados con HTML5</title>
</head>
<body>
<canvas id="gradiente" width="400px" height="400px" style="border:1px solid black">
Este navegador no soporta canvas
</canvas>
<script type="text/javascript">
var c=document.getElementById('gradiente');
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,400,0); // creamos la linea gradiente con vector de direccion primera y segunda parte del vector en x,y
grd.addColorStop(0,"White"); //dibujamos el gradiente al 0%
grd.addColorStop(0.25,"Red"); //dibujamos el gradiente al 25%
grd.addColorStop(0.5,"Green"); //dibujamos el gradiente al 50%
grd.addColorStop(0.75,"Blue"); //dibujamos el gradiente al 75%
grd.addColorStop(1,"Black"); //dibujamos el gradiente al 100%
cxt.fillStyle=grd; // estillo de relleno
cxt.fillRect(0,0,400,400); // el area a cubrir del gradiente
</script>
</body>
</html>
Y el resultado en pantalla es:
