Tutorial HTML5: la etiqueta de lienzo dibuja gráficos de gradiente lineal de gradiente

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:

context.createLineArgradient (xStart, yStart, Xend, Yend);

XStart: el eje horizontal del punto de inicio del gradiente

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:

context.AddColorStop (offset, color);

Use este método para agregar el color del gradiente, que tiene dos parámetros:

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