Exemplos de código para implementar animação normal e animação de partículas no canvas

Canvas é usado para desenhar imagens e animações em páginas da web. Pode ser entendido como uma tela, e o efeito desejado é construído nesta tela.

O Canvas pode desenhar efeitos dinâmicos. Além das animações regulares comumente usadas, o conceito de partículas também pode ser usado para obter efeitos dinâmicos mais complexos. Este artigo usa efeitos dinâmicos comuns e efeitos especiais de partículas para implementar um relógio simples.

A animação comum usa a API canvas para obter padrões e animações regulares.

Efeito

O efeito é relativamente simples de conseguir. Analisamos principalmente a implementação do deslocamento do ângulo entre a escala e o ponteiro.

Este exemplo é o desenho da escala horária: há 12 horas no mostrador, Math.PI é 180° e cada hora ocupa 30°.

.save() significa salvar o estado do ambiente de tela atual e desenhar com base nisso. Após a conclusão do desenho, o status e os atributos do caminho salvos anteriormente serão retornados.

O mesmo vale para a escala de minutos, basta alterar o ângulo e o estilo.

 // Escala de tempo por hora offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // Escala de cor offscreenCanvasCtx.strokeStyle = '#fff'; lineWidth = 3; // Ocupa 30° a cada hora offscreenCanvasCtx.rotate(Math.PI / 6); // A posição inicial do desenho offscreenCanvasCtx.lineTo(140, 0) // A posição final do desenho; offscreenCanvasCtx. restaurar();

Tomemos o ponteiro dos segundos como exemplo: obtenha os segundos da hora atual e calcule o ângulo de deslocamento correspondente

 var agora = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); salvar();offscreenCanvasCtx.rotate(sec*(Math.PI/30)); offscreenCanvasCtx.stroke();

O Canvas pode ser usado para desenhar animações complexas e irregulares. Os efeitos de partículas podem ser usados ​​para obter efeitos dinâmicos complexos e aleatórios.

As partículas referem-se a cada pixel nos dados da imagem imageData . Após obter cada pixel, adicione atributos ou eventos para interagir com as partículas na área para obter efeitos dinâmicos.

Efeito

Tomemos como exemplo a conversão da imagem na figura abaixo. O efeito é primeiro renderizar a imagem na tela e depois obter cada pixel na área onde o texto está localizado.

 let image = new Image(); image.src='../image/logo.png'; let pixels=[]; Renderize a imagem e obtenha as informações do pixel na área image.onload=function(){ ctx.drawImage(imagem,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height); imagem.width)/2,(canvas.height-image.height)/2,image.width,image.height); //Obter informações de pixels do gráfico //Desenhar imagem};

O tamanho da imagem é 300*300, com um total de 90.000 pixels. Cada pixel ocupa 4 bits e armazena dados RGBA.

 function getPixels(){ var pos=0; var data=imageData.data; //Dados do array unidimensional de RGBA //A altura e largura da imagem de origem são 300px for(var i=1;i<=image. largura;i++ ){ for(var j=1;j<=image.height;j++){ pos=[(i-1)*image.width+(j-1)]*4; //Obter a posição do pixel if(data[pos]>=0){ var pixel={ x:(canvas.width-image.width)/2+j+Math.random()*20, //Redefinir cada pixel informações de posição y: (canvas.height-image.height)/2+i+Math.random()*20, //Redefinir as informações de posição de cada pixel fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(dados[pos+3])+')' } pixels.push(pixel); } } } } function drawPixels() { var canvas = document.getElementById(myCanvas); canvas.getContext(2d); = pixels[i]; curr_pixel.y, 1, 1);

Renderizar relógio de texto

 function time() { ctx.clearRect(0,0,canvas.width,canvas.height) ctx.font = 150px negrito; ctx.textBaseline='top'; (novo Date().format('hh:mm:ss'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight });

Efeito

O conceito de partículas de conversão de texto é o mesmo acima. Os pixels da área selecionada são obtidos, selecionados de acordo com as condições do filtro e armazenados no array. Redesenhe após a travessia.

 função getPixels(){ deixe imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight deixe data = imgData.data pixelsArr = [] for(let). i=1;i<=textHeight;i++){ for(let j=1;j<=textWidth;j++){ pos=[(i-1)*textWidth+(j-1)]*4; //Obter a posição do pixel if(data[pos]>=0){ var pixel={ x:j+Math.random()* 20, //Redefinir as informações de posição de cada pixel y:i+Math.random()*20, //Redefinir as informações de posição de cada pixel fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(dados[pos+3])+')' }; pixelsArr.push(pixel);

imgData salva as informações do pixel na área selecionada, cada pixel ocupa 4 bits e salva as informações RGBA de quatro bits. Filtrando o quarto bit de cada pixel, esse código salva todos os pixels com uma transparência que não é 0 no array pixelsArr .

x e y registram as informações de posição da partícula Para produzir o efeito de movimento na renderização, uma posição de deslocamento de 0 a 20 pixels é adicionada a cada partícula. Cada vez que ela é redesenhada, a posição de deslocamento é gerada aleatoriamente para gerar. movimento.

Após obter as partículas, é necessário limpar o texto original da tela e redesenhar as partículas obtidas na tela.

 function drawPixels() { // Limpa o conteúdo da tela e redesenha ctx.clearRect(0,0,canvas.width,canvas.height); for (let i in pixelsArr) { ctx.fillStyle = pixelsArr[i].fillStyle; r = Math.random()*4 ctx.fillRect(pixelsArr[i].x, pixelsArr[i].y, r, r); } }

O estilo de redesenho de partículas é a cor e transparência originais ao filtrar pixels, e quando cada partícula é desenhada na tela, o parâmetro de tamanho r é definido e o valor de r é um número aleatório de 0 a 4. As partículas resultantes são dimensionadas aleatoriamente.

Após obter as partículas e redesenhar com sucesso, a página precisa ser atualizada em tempo real. O método window.requestAnimationFrame(callback) é usado aqui.

 function time() { ...... getpixels(); //Obter partículas drawPixels(); // Redesenhar partículas requestAnimationFrame(time });

O método window.requestAnimationFrame(callback) informa ao navegador que você deseja executar a animação e solicita que o navegador chame a função especificada para atualizar a animação antes do próximo redesenho. Este método recebe como parâmetro uma função de retorno de chamada, que será chamada antes do redesenho do navegador.

Este método não precisa definir o intervalo de tempo e a frequência de chamada adota o intervalo de tempo do sistema (1s).

Explicação do documento clique aqui

Efeito

Este artigo atinge principalmente o efeito dinâmico do relógio de duas maneiras diferentes, entre as quais o relógio de partículas tem mais operabilidade. Na futura série canvas, efeitos mais dinâmicos serão implementados para o sistema de partículas.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.