Introducción al artículo de Wulin.com (www.vevb.com): la aplicación de la etiqueta de lienzo de entrenamiento diario HTML5 - Dibujo de gráficos de gradiente lineal.
Hasta ahora, se ha introducido el conocimiento básico de los gráficos de dibujo usando lienzo. A partir de esta sección, presentaremos uno de los otros conocimientos de dibujo más avanzados: gradiente lineal. Primero, revisemos el Color FillStyle especificado en "HTML5 Daily Practice: Aplicación de etiquetas de lienzo - Rectángulos de dibujo". Al dibujar un gradiente lineal, necesitamos usar un nuevo objeto: el objeto LinearGradient, y usar el método CreateLineArgradiend del objeto de contexto gráfico para crear el objeto. La definición de este método es la siguiente:Ystart: la coordenada vertical del punto de inicio del gradiente
Xend: eje horizontal de punto final de gradiente
yend: la coordenada vertical del punto final de gradiente
Al usar este método, se crea un objeto LinearGradient utilizando dos puntos de coordenadas. Entonces, ¿cómo se debe establecer el color de gradiente?
Después de pasar el objeto LinearGradient, usamos el método AddColorStop para configurarlo. El ejemplo de este método es el siguiente:
OFFSET: es el desplazamiento del número de punto flotante entre 0-1 del color, dejando el punto de partida del gradiente, que establece el color en el desplazamiento desde el punto de inicio del gradiente.
Color: se utiliza el color para establecer el dibujo
Ilustración del parámetro de compensación en el método addColorStop