HTML5 CONJUNTO PLAY GIRANDO EFECTO DE EFECTO DE MAPO PROGRESIVO DE LA Big Wave de Cool Hyun (demostración afiliada)

Este artículo presenta el efecto del lienzo HTML5 para jugar un horario genial de Big Wave, de la siguiente manera:

Como se muestra en la figura anterior, este artículo debe lograr el efecto anterior.

Porque AlloyTouch recientemente escribió un efecto de carga genial y genial. Entonces, la tabla de progreso de las olas grandes preferidas.

En primer lugar, debemos empaquetar el componente de progreso de la imagen Big Wave. El principio básico es usar lienzo para dibujar diagramas de vectores y materiales de imagen para sintetizar el efecto especial de onda.

El método QuadraticCurVeto () se usa para agregar un punto a la ruta actual utilizando el punto de control especificado de la segunda curva de Bessel.

Sintaxis de JavaScript:

 context.quadraticCurveto (cpx, cpy, x, y);

X Coordinada del punto de control de Bessel CPX

CPY Bessel Control Point Y Coordinate

X coordina en el punto final de x

Y capuchas al final de Y

como:

 ctx.moveto (20,20);

A través del código anterior, puede dibujar una segunda curva de Bessel.

 Var WaveWidth = 300, Offset = 0, WaveHeight = 8, WaveCount = 5, StartX = -100, Starty = 208, Progress = 0, ProgressTep = 1, D2 = WaveWidth / WaveCount, = D2 / 2, HD = D / 2 , c = document.getElementById (mycanvas), ctx = c.getContext (2d); === D2) Offset = 0; para (var i = 0; i <waveCount; i ++) {var dx = i * d2; OffsetX + HD + D, Offset -WaveHeight, OffsetX + D2, Offsety);

Puedes ver las olas del ejercicio infinito:

Las necesidades principales aquí.

Si obtiene el clon del código, puede intentar dibujarlo a un lienzo grande.

Aquí, if (-1 offset === d2) offset = 0;

D2 es un pico+longitud del valle. Después de un pico+un valle, el mismo ciclo de vida comenzó a comenzar con el mismo ciclo de vida que 0, por lo que se puede restablecer a 0.

Las propiedades de GlobalCompositEOperation ilustran cómo el color dibujado en el lienzo se combina con el color existente en el lienzo.

Dibuje un diagrama de progreso de ola grande para ser utilizado:

 ctx.globalCompositEOperation = Destino -top;

Importancia en el destino del destino: el contenido existente en el lienzo solo se conservará donde se superpone con el nuevo gráfico. La nueva figura se dibuja después del contenido.

Por supuesto, hay muchas opciones para GlobalCompositepration.

 var img = nueva imagen (); img.onload = function () {tick ();};

Para ser simple y directo, aquí está el código que encapsula un cargador, y SRC se establece directamente a través de una nueva imagen para cargar la imagen.

Después de dibujar un diagrama de vectores, establezca el globalcompositeleperation y luego dibuje una imagen de pingüina.

por fin

Ejemplo de descarga: demostración

Lo anterior es todo el contenido de este artículo.