Comece com tela HTML

Sep 11, 2025

Como

O HTML & LT; Canvas & GT; elemento é uma solução poderosa para criar gráficos baseados em pixel na web usando Javascript. e permitirá que você crie alguns efeitos notáveis com um pouco de prática.

Neste tutorial, daremos uma olhada na criação de um objeto de tela, desenhando visualizações simples e animando esses visuais.

01. Crie uma página

A tela é fundamentalmente um elemento HTML que você coloca na página, escala para cobrir a área desejada e pode então se desenhar. Para começar, precisamos criar uma página simples com um objeto de tela.

 & lt;! Doctype html & gt;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta charset = 'utf-8' / & gt;
  & lt; title & gt; Demo de lona HTML & lt; / title & gt;
  & lt; Link Rel = 'Stylesheet' href = 'custom.css' / & gt;
  & lt; script src = "canvas.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; corpo e gt;
  & lt; canvas ID = "HTML-Canvas" & GT;
  & lt; / corpo & gt;
& lt; / html & gt;

02. Escala a tela

Para nos dar bastante espaço para brincar, queremos que nossa tela preencha a tela inteira. Nós também vamos dar um fundo preto para que você saiba definitivamente lá. Isso pode realmente ser um pouco difícil de fazer sem acabar com barras de rolagem ou espaço branco. O CSS abaixo deve cuidar disso.

 lona {
  Altura: 100vh;
  Largura: 100VW;
  Posição: Absoluto;
  fundo-cor: # 000000;
}
  Margem: 0;
  preenchimento: 0;
}

03. Inicializar a tela para uso

Em seguida, precisamos adicionar algum javascript para configurar a tela pronta para usar. Teremos o gancho de um evento DomContentLoad para garantir que o script não tente executar antes que o elemento de tela esteja pronto. Também teremos a resolução da tela para corresponder à área que ele cobre - caso contrário, a tela irá aumentar sem aumentar a resolução, levando a gráficos embaçados ou pixelados.

 document.addeventlistener ("DomContentLoaded", função () {
  var tela = documento.getElementByID ("Canvas HTML");
  Var círculos = [];
  var raio = 50;
  Canvas.Width = Canvas.ClientWidth;
  Canvas.Height = Canvas.ClientHeight;
  var context = canvas.getContext ("2D");
}, falso);

04. Desenhe uma forma

Você notará que no último passo, nós criamos algo chamado 'contexto'. É assim que ocorre o desenho na tela. É mais fácil pensar no contexto como um pincel que podemos usar para desenhar linhas diferentes, arcos e formas básicas.

O que podemos agora fazer é colocar nosso contexto usar escrevendo uma função de desenho que criará um arco de 360 graus - isto é, um círculo. Fazemos isso informando o contexto para definir um arco, definir estilos para a borda e preenchimento, depois subir as funções de preenchimento () e acidente vascular cerebral () para realmente desenhar a forma (acidente vascular cerebral).

 Função Drawcircle (X, Y, Raio, Fronteira, Border_Colour, Fill_Colour)
  {
  contexto.BeginPath ();
  context.arc (x, y, raio, 0,2 * math.pi);
  contexto.stilo = fronteira_colour;
  context.fillstyle = preenchimento_colour;
  contexto.Linewidth = fronteira;
  contexto.ClosePath ();
  context.fill ();
  CONTEXT.STROKE ();
  }

05. Crie muitos círculos

Excelente. Nós temos uma função que pode desenhar círculos. Agora precisamos de algo para desenhar. Vamos estender o código da etapa 3 para criar um array descrevendo objetos do círculo. Ele irá armazenar coordenadas X e Y de cada círculo, cor e um valor de direção.

Criamos esta estrutura de matriz, em vez de apenas desenho círculos imediatamente porque nos permitirá animar os círculos, re-desenhando o conteúdo da matriz mais tarde.

 para (var i = 0; i & lt; 20; i ++) {
  var X = raio + (math.random () * (lona.Width - (2 * raio)));
  var y = raio + (math.random () * (lona.Height - (2 * raio)));
  var color = randomcolour ();
  var direção = math.random () * 2.0 * math.pi;
  círculos.push ({x: x, y: y, cor: cor, direção: direção});
  desenhar(); }

06. Randomise a cor

No último passo, usamos algumas novas funções que ainda não foram definidas. Vamos começar com randomcolour (). Esta será uma função de utilidade que retorna uma cadeia hexadecimal randomizada representando uma cor. É bastante simples implementar.

 função randomcolour () {
  var chars = '0123456789ABCDEF';
  var color = '#';
  para (var i = 0; i & lt; 6; i ++) {
  cor + = chars [math.floor (math.random () * 16)];
  }
  Cor de retorno; }

07. Desenhe os gráficos na página

Agora estamos prontos para reunir as coisas, implementando a função Draw (). Isso fará duas coisas-chave. Em primeiro lugar, limpará a tela usando a função Clearret (). Isso será importante quando chegarmos a animar nossos círculos, para evitar desenhar o novo quadro por cima do antigo. Ele irá então iterar através da matriz que construímos e atraímos cada círculo na tela em sucessão usando nossa função Drawcircle.

 Função Draw () {
  context.clearrect (0, 0, lona.Width, lona.Height);
  círculos.Forach (função (círculo) {
  drawcircle (círculo.x, círculo.y, raio, 5, círculo.clour, círculo.colour);
    }); }

08. Anime as formas

Se você experimentar agora, verá alguns círculos estáticos pintados na página. Mas queremos animá-los. Para fazer isso, precisamos estender nossa função de desenho () de algumas maneiras. Em primeiro lugar, usaremos o valor do círculo.Direction, fortemos para a matriz para calcular as alterações na posição X e Y para o círculo.

Em seguida, usaremos uma função interna chamada RequestanImationFrame que recursivamente chama a função Draw (). O SolicitarAnimationFrame permite que o navegador decida quando chamar a função novamente, evitando a necessidade de implementar temporizadores para calcular quando desenhar o próximo quadro.

 Função Draw () {
  context.clearrect (0, 0, lona.Width, lona.Height);
  círculos.Forach (função (círculo) {
  círculo.x = círculo.x + math.co (círculo.direction);
  círculo.y = círculo.y + math.sin (circle.direction);
  drawcircle (círculo.x, círculo.y, raio, 5, círculo.clour, círculo.colour);
  });
  RequistanimationFrame (empate);
  }

09. Bounce na borda da página

Há uma coisa que ainda está faltando, no entanto. Os círculos agora apenas desaparecem da borda da tela. Vamos fazê-los se recuperar. Para fazer isso, adicionaremos uma chamada a uma nova função, salto (círculo), dentro do loop foreach da função Draw ().

A função de salto determinará quando um círculo estiver na borda da tela e ajustará seu valor de direção apropriadamente.

 Função Bounce (Circle) {
  if (((círculo.x - raio) & lt; 0) || ((círculo.y - raio) & lt; 0) || ((círculo.x + raio) & gt; canvas.width) || ((círculo. y + raio) & gt; lona.Height)) {
  Circle.Direction + = (math.pi / 2);
  }
  if (circle.direction & gt; (2 * math.pi)) {
  Circle.Direction - = (2 * math.pi);
  }
}

Este artigo originalmente apareceu em Web designer edição 266. Compre aqui.

Artigos relacionados:

Criar um digital etch um esboço usando lona
Tudo o que você precisa saber sobre o novo nó.js 8
Como exportar animações de efeitos para HTML5

Comece com tela HTML

01. Crie uma página

02. Escala a tela

03. Inicializar a tela para uso

04. Desenhe uma forma

05. Crie muitos círculos

06. Randomise a cor

07. Desenhe os gráficos na página

08. Anime as formas

09. Bounce na borda da página

Como - Artigos mais populares

Use Framer X para construir protótipos interativos

Krita Tutoriais: Aprenda os fundamentos do software de arte digital

30 Dicas de Renderização de Keyshot

Ilumine seu trabalho 3D com luzes de cúpula

Como conseguir melhor iluminação com V-Ray

Melhore suas pinceladas em óleos

Compreender a técnica de pintura molhada

Crie um painel responsivo com FIGMA

Categorias