Cómo dibujar colores degradados usando un lienzo HTML5

El degradado de lienzo HTML5 es un modo de color que se utiliza para rellenar o trazar gráficos. Los colores degradados son transiciones de diferentes colores en lugar de un solo color. Veamos algunos ejemplos de degradados de lienzo:

Los degradados se pueden dividir en dos tipos según su tipo:

Degradado lineal

Degradado radial

Los degradados lineales cambian los colores en un patrón lineal, es decir, horizontal, vertical o diagonal.

Un degradado radial cambia de color en un patrón circular, con colores que irradian hacia afuera desde el centro del círculo.

Degradado lineal

Como se mencionó anteriormente, los degradados lineales cambian los colores en un patrón lineal. Podemos crear un degradado lineal usando el método createLinearGradient() del contexto 2D. createLinearGradient(x1,y1,x2,y2);

La función CreateLinearGradient() tiene cuatro parámetros: x1, y1, x2 e y2. Estos cuatro parámetros determinan la dirección y la distancia del gradiente. Un gradiente lineal se extenderá desde el primer punto (x1,y1) hasta el segundo punto (x2,y2).