HTML Canvas: guia para criar gráficos dinâmicos da Web


Seu navegador não suporta o elemento <canvas>.
A tela HTML é o tópico que estamos discutindo. Em uma página da Web, os gráficos são desenhados usando o elemento HTML <canvas> .

<Canvas> foi usado para criar o gráfico à esquerda. A imagem consiste em quatro elementos: um texto colorido, um retângulo multicolorido e um retângulo de gradiente.

Índice-

HTML Canvas : O que é ?

HTML Canvas é uma superfície de desenho em HTML que permite criar gráficos dinâmicos e animações usando JavaScript.

É um elemento HTML que cria uma área em uma página da Web onde você e outros desenvolvedores podem desenhar gráficos e animações usando JavaScript .

A tela fornece um conjunto abrangente de ferramentas de desenho que você pode usar para criar formas , linhas , gradientes , padrões e texto em uma tela. Ele também fornece uma variedade de ferramentas de animação que permitem criar gráficos da Web dinâmicos e interativos.

Existem inúmeras maneiras de desenhar caminhos, caixas, círculos, texto e inserir imagens no Canvas.

Vantagens do HTML Canvas

HTML Canvas é uma ferramenta versátil e robusta que oferece diversas vantagens para desenvolvedores web que buscam criar conteúdo cativante e interativo. Alguns dos benefícios do HTML Canvas incluem:

  • O HTML Canvas capacita os desenvolvedores a criar gráficos dinâmicos e responsivos sem usar plug-ins ou software adicional. Consequentemente, é simples criar gráficos interativos ou animações que respondem à entrada do usuário, o que o torna ideal para a criação de conteúdo visualmente atraente.
  • O HTML Canvas é otimizado para alto desempenho, permitindo que os desenvolvedores criem renderizações em alta velocidade, animações complexas e gráficos executados sem problemas e sem demora. Isso o torna uma excelente escolha para desenvolver jogos, visualizações e outros conteúdos interativos.
  • O HTML Canvas é compatível com todos os principais navegadores da Web, incluindo Firefox, Safari, Chrome e Edge, o que facilita a criação de conteúdo multiplataforma que funciona perfeitamente em diferentes dispositivos e sistemas operacionais.
  • O conteúdo do HTML Canvas pode ser tornado acessível a usuários com deficiências por meio do uso de técnicas de design acessíveis, como o fornecimento de descrições alternativas de texto para conteúdo não textual. Isso garante que todos os usuários possam acessar e interagir com o conteúdo, independentemente de suas habilidades.
  • O HTML Canvas fornece uma ampla variedade de ferramentas e recursos que podem ser utilizados para criar uma ampla variedade de conteúdo visual, desde desenhos simples até animações e visualizações complexas. Essa versatilidade permite que os desenvolvedores criem conteúdo exclusivo e envolvente, adaptado às necessidades específicas de seus usuários.

Compatibilidade do navegador

No canvas HTML, os números na tabela indicam qual versão do navegador é totalmente compatível com o elemento <canvas> .

Elemento
<canvas> 10,0 14.5 10,0 16,0 92,0

Como funciona o HTML Canvas?

Para usar HTML Canvas, você primeiro cria um elemento canvas na página da web usando HTML.

O elemento canvas fornece uma superfície de desenho que está em branco por padrão. Depois que o elemento canvas é criado, você pode usar JavaScript para interagir com a tela e desenhar formas, linhas e outros gráficos nela.

O Canvas fornece um conjunto de métodos que você pode usar para desenhar gráficos na tela.

Por exemplo, o método fillRect() pode ser usado para desenhar um retângulo na tela, enquanto o método arc() pode ser usado para desenhar uma forma circular.

Você também pode usar a API para criar animações atualizando a tela em intervalos regulares usando o método requestAnimationFrame() .

A tela em uma página HTML é uma área retangular. Não há borda ou conteúdo em uma tela por si só.

Aqui estão as marcações:

<canvas id=”myCanvas” width=”250″ height=”120″></canvas>

Nota: Certifique-se de especificar uma variável de id (a ser mencionada nos scripts) e os parâmetros de largura e altura para definir as dimensões da tela. Você pode adicionar uma borda usando o atributo style.

Neste exemplo, temos uma tela vazia/ tela HTML:


Seu navegador não suporta o elemento de tela.

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="250" height="120" style="border:1px solid
#000000;">
</canvas>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Agora adicione JavaScript

Você deve adicionar JavaScript à tela retangular após criá-la. Alguns exemplos são os seguintes:

Desenhe uma linha


Seu navegador não suporta o elemento de tela

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="220" height="150" style="border:1px solid black">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a = document.getElementById("myCanvas");
var cmx = a.getContext("2d");
cmx.moveTo(0, 0);
cmx.lineTo(220, 150);
cmx.stroke();
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Desenhe um Triângulo

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="130" height="80" style="border:1px solid black;"></canvas>
<script>
window.onload = function() {
const canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
}
};
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Desenhe um Sorriso

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="330" height="150" style="border:1px solid black;"></canvas>
<script>
window.onload = function() {
const canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();
}
};
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Desenhar um círculo


Seu navegador não suporta o elemento de tela

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="220" height="150" style="border:1px solid black;">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a = document.getElementById("myCanvas");
var cmx = a.getContext("2d");
cmx.beginPath();
cmx.arc(100, 70, 40, 0, 2 * Math.PI);
cmx.stroke();
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Traço do Texto


Seu navegador não suporta o elemento de tela

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<canvas id="mrxcanvas" width="220" height="150" style="border:1px solid black;">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a = document.getElementById("mrxcanvas");
var cmx = a.getContext("2d");
cmx.font = "25px Poppins";
cmx.strokeText("Mr Examples", 40, 80);
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Desenhe um Texto


Seu navegador não suporta o elemento de tela

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<canvas id="mrxcanvas" width="220" height="150" style="border:1px solid black;">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a = document.getElementById("mrxcanvas");
var cmx = a.getContext("2d");
cmx.font = "25px Poppins";
cmx.fillText("Mr Examples", 40, 80);
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Desenhar Gradiente Linear


Seu navegador não suporta o elemento de tela

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<body>
<canvas id="mrxcanvas" width="220" height="150" style="border:1px solid black;">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a = document.getElementById("mrxcanvas");
var cmx = a.getContext("2d");// Create gradient
var grd = cmx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "white");// Fill with gradient
cmx.fillStyle = grd;
cmx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Draw An Image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" alt="Standing Girl" width="300" height="500">
<p>Canvas to fill:</p>
<canvas id="mrxcanvas" width="300" height="500" style="border:1px solid black;">
Your browser not compatible with HTML canvas tag.</canvas>
<p><button onclick="mrxcanvas()">Try it</button></p>
<script>
var a = document.getElementById("mrxcanvas");
var cmx = a.getContext("2d");
var img = document.getElementById("scream");
cmx.drawImage(img, 10, 10);
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Desenhar Gradiente Circular


Seu navegador não suporta o elemento de tela

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<body>
<canvas id="mrxcanvas" width="220" height="150" style="border:1px solid black;">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a= document.getElementById("mrxcanvas");
var cmx = a.getContext("2d");// Create gradient
var grd = cmx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "white");// Fill with gradient
cmx.fillStyle = grd;
cmx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Desenhe um coração

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="330" height="150" style="border:1px solid black;"></canvas>
<script>
window.onload = function() {
const canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill();
}
};
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo Path2D

Criar um retângulo e um círculo é nosso objetivo. Objetos desse tipo são armazenados como objetos Path2D .

Ao usar a API Path2D atualizada, as novas funções de traçado e preenchimento podem ser usadas para desenhar os dois objetos na tela em vez do caminho atual.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="330" height="150" style="border:1px solid black;"></canvas>
<script>
window.onload = function() {
const canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
const rectangle = new Path2D();
rectangle.rect(10, 10, 50, 50);
const circle = new Path2D();
circle.arc(100, 35, 25, 0, 2 * Math.PI);
ctx.stroke(rectangle);
ctx.fill(circle);
}
};
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Práticas recomendadas de HTML Canvas

Aqui estão algumas práticas recomendadas a serem lembradas ao usar o HTML Canvas:

  1. Para criar animações suaves e eficientes, é melhor usar o método requestAnimationFrame() para atualizar a tela em intervalos regulares.
  2. O HTML Canvas pode ser usado para criar gráficos e animações complexos, mas é essencial manter as coisas simples. Muitos gráficos ou animações podem tornar a página da Web mais lenta e levar a uma experiência de usuário insatisfatória.
  3. Os elementos HTML Canvas devem ser projetados para responder ao tamanho da tela e ao tipo de dispositivo. Isso garante que os gráficos da tela tenham uma ótima aparência em todos os dispositivos, incluindo desktops, tablets e telefones celulares.
  4. Os gráficos HTML Canvas podem consumir muitos recursos, por isso é importante otimizá-los para desempenho. Isso pode ser feito usando gráficos e animações leves, reduzindo o número de gráficos e animações na página e otimizando o código para execução rápida.
Subscreva a nossa Newsletter abaixo, se quiser estar ligado às informações técnicas deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.