A tela HTML5 reproduz Turnando o efeito de mapa progressivo de Big Wave Cool Hyun (demonstração afiliada)

Este artigo apresenta o efeito da tela HTML5 para jogar uma cronograma de grande onda legal, como segue:

Como mostrado na figura acima, este artigo é para obter o efeito acima.

Porque o AlloyTouch escreveu recentemente um efeito de carregamento legal e legal. Portanto, o mapa de progresso preferido de grandes ondas.

Primeiro de tudo, devemos empacotar o componente de progresso da imagem de grande onda. O princípio básico é usar a tela para desenhar diagramas vetoriais e materiais de imagem para sintetizar o efeito especial da onda.

O método quadraticcurveto () é usado para adicionar um ponto ao caminho atual usando o ponto de controle especificado da segunda curva de Bessel.

Sintaxe JavaScript:

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

X Coordenada do ponto de controle de CPX Bessel

CPY Bessel Control Point Y Coordenada

X coordena no ponto final de x

Y capuzes no ponto final de Y

como:

 ctx.moveto (20,20);

Através do código acima, você pode desenhar uma segunda curva de Bessel.

 Var largura de onda = 300, deslocamento = 0, WaveHeight = 8, WaveCount = 5, startx = -100, starty = 208, progresso = 0, progresstep = 1, d2 = wavewidth / onda, = d2 / 2, hd = d / 2 , c = documental.getElementById (myCanvas), ctx = c.getContext (2D); === D2) Offset = 0; para (var i = 0; i <onda; i ++) {var dx = i * d2; Offsetx + HD + D, Offset -waveHeight, Offsetx + D2, Offsety);

Você pode ver as ondas do exercício infinito:

As principais necessidades aqui.

Se você obtiver o clone de código, tente desenhá -lo para uma tela grande.

Aqui, se (-1 deslocamento === D2) deslocamento = 0;

D2 é o comprimento de um pico+vale. Após um pico+um vale, o mesmo ciclo de vida começou a começar com o mesmo ciclo de vida que 0, para que possa ser redefinido para 0.

As propriedades do GlobalCoTePesoOperation ilustram como a cor desenhada na tela é combinada com a cor existente na tela.

Desenhe um diagrama de progresso de ondas grandes a ser usado:

 ctx.GlobalComPoToOperation = Destination -top;

Significado de destino de destino: o conteúdo existente na tela será retido apenas quando se sobrepõe ao novo gráfico. A nova figura é desenhada após o conteúdo.

Obviamente, existem muitas opções para o GlobalCotestPation.

 var iMg = nova imagem (); img.onload = function () {tick ();};

Para ser simples e direto, aqui está o código que encapsula um carregador, e o SRC é definido diretamente através da nova imagem para carregar a imagem.

Depois de desenhar o diagrama de vetores, defina o GlobalCositePrty e, em seguida, desenhe uma imagem do Penguin.

afinal

Exemplo Download: demonstração

O acima é todo o conteúdo deste artigo.