Exemplo de efeito de bola flutuante de desenho em tela

Recentemente, tenho prestado atenção às informações do blockchain, vagando por aí e acidentalmente vi o efeito da página inicial deste site. É um monte de bolas flutuantes. Quando a bola estiver próxima, haverá uma linha de detecção conectada a ela. O mouse também pode criar uma linha de detecção com a bola. Olhe O seguinte é feito usando tela.

Efeito original

alcançar efeito

Já tive muito contato com SVG antes e sei que o canvas também pode obter efeitos de renderização muito poderosos, mas nunca houve nenhum cenário de uso que me desse a chance de começar, então desta vez pretendo tentar sozinho. .

Além disso, estou interessado nisso porque um é que gosto de efeitos visuais e o outro é que gosto da sensação de simular o mundo físico como um motor de jogo. Imagine que essas bolas vão colidir umas com as outras. , ou ter repulsão gravitacional entre si, ou aumentar o fator de gravidade. Essa animação também pode abrir muita imaginação.

Veja o repositório do github aqui.

As instruções de desenho do Canvas são muito semelhantes às instruções do SVG, muito simples.

 ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

BeginPath inicia um caminho, arc desenha um círculo e o preenche com cor.

 ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.stroke();

Da mesma forma, BeginPath inicia um caminho, moveTo move o pincel para o ponto inicial, lineTo desenha a linha até o ponto final e traça os traços.

Para manter a tela em tela cheia, basta redefinir a largura e a altura da tela quando a janela for carregada ou redimensionada.

 var canvas = document.getElementById(canvas); function resizeCanvas() { canvas.width = window.innerWidth;

Animações básicas me ajudam a começar.

Quatro etapas para criar animação:

1. Limpe o conteúdo da tela, geralmente usando clearRect()
2. Salvar estado da tela
3. Desenhe conteúdo
4. Redefinir estado da tela

O que fiz foi relativamente simples, usando apenas 1 e 3, que é limpar constantemente a tela e depois redesenhá-la.

 window.onload = function () { resizeCanvas(); window.requestAnimationFrame(draw);};function cleanCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height);}function draw() { cleanCanvas (); //desenha coisas.window.requestAnimationFrame(draw);}

Três estão disponíveis:

1. window.setInterval() Se não houver necessidade de interação do usuário e apenas redesenho constante, isso é suficiente.
2. window.setTimeout() Se quiser que as operações do usuário, como teclado e mouse, afetem a animação, você pode usar isto (não entendo, requestAnimationFrame não é melhor?)
3. window.requestAnimationFrame() informa ao navegador o que fazer antes de redesenhar na próxima vez, ou seja, sua própria operação de desenho personalizada.

Este exemplo no MDN é muito legal. Ele pode ser movido e o seguinte é apenas uma captura de tela.

Já vi algum desenvolvimento de mecanismo de jogo antes e fiz encapsulamento orientado a objetos conscientemente. O que é usado aqui é muito simples.

O mais básico é que Vector representa um ponto/vetor em um espaço bidimensional, e seus membros são apenas x e y.

Com base nisso, Círculo representa um círculo, membro centro: Vetor representa o centro do círculo, raio: número representa o raio e velocidade: Vetor representa a velocidade.

Em seguida, basta encapsular algumas funções-membro para seu próprio uso.

TypeScript + Webpack + Webpack-dev-server não é complicado, basta consultar o seguinte conteúdo:

1. Webpack/Primeiros passos
2. Pacote Web/TypeScript
3. Webpack/devServer
4. webpack-dev-servidor

Além disso, também tentei o npx, que é usado para executar programas executáveis ​​​​npm. No passado, o webpack era instalado globalmente e você poderia simplesmente chamar o webpack xx diretamente. Se você instalar o webpack localmente, precisará acessar ./node_modules/. .bin/webpack Para executar o webpack local, agora você pode npx webpack xxx.

Na configuração do devServer, adicionei hot: true para ativar a atualização a quente. Como resultado, a página da web solicitou: [HMR] Hot Module Replacement está desabilitado.

Achei que era uma armadilha antiga. Quando precisar chamá-lo, adicione os parâmetros da linha de comando: webpack-dev-server --hot --inline.

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.