Marca de tela em HTML – <canvas>

Falaremos sobre Tag Html canvas neste post. Esperando que satisfaça os requisitos para a aprendizagem.

A tag HTML <canvas> é usada para criar uma área de desenho em uma página da web usando JavaScript. A tag <canvas> é um contêiner para gráficos e permite que os desenvolvedores criem e manipulem gráficos usando uma variedade de ferramentas e bibliotecas JavaScript.

Crie um retângulo em vermelho na hora e coloque-o dentro da tag <canvas>:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html><body>
<canvas id="mrxCanvas">
Canvas is not supported by your browser.
</canvas>
<script>
var canvas = document.getElementById("mrxCanvas");
var mrxample = canvas.getContext("2d");
mrxample.fillStyle = "#FF0000";
mrxample.fillRect(0, 0, 80, 80);
</script>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Outro exemplo de <canvas>:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 50, 50);ctx.fillStyle = 'red';
ctx.fillRect(70, 70, 50, 50);
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca de tela em HTML – <canvas>:

Usos e Definição

A tag Canvas <canvas> permite que você desenhe gráficos em tempo real com scripts (principalmente JavaScript).

Você terá que usar um script para desenhar seus gráficos, no entanto. A tag canvas é transparente e é apenas um contêiner para gráficos.

Navegadores sem JavaScript e navegadores que não suportam <canvas> exibirão qualquer texto dentro dele.

Notas e dicas

Conselho: Saiba mais sobre <canvas> visitando nosso Tutorial HTML Canvas .

Conselho: Você pode encontrar uma lista completa de todas as propriedades e métodos do HTML Canvas em nossa Referência do HTML Canvas .

Compatibilidade do navegador

A tabela indica qual versão do navegador foi a primeira a incluir suporte completo para o elemento.

Elemento
<canvas>	4.0	9,0	2.0	3.1	9,0

Atributos

Atributo	Valor	Visão geral
altura	píxeis	Defina a altura da tela. 150 é o valor padrão.
largura	píxeis	Determina que a largura do valor padrão da tela é 300.

Atributos Globais

Os atributos globais do HTML também funcionam com a tag <canvas> .

Atributos do Evento

Em HTML, os atributos do evento também podem ser usados com a tag <canvas> .

Configurações de CSS por padrão

Normalmente, os seguintes valores são usados pelos navegadores para exibir o elemento <canvas> :

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<style>
canvas {
height: 200px;
width: 450px;
border:" 2px solid black ";
}
</style>
<canvas></canvas>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Usando JavaScript, você pode desenhar na tela. A compatibilidade com dispositivos móveis e navegadores o torna particularmente interessante.

Apesar de existir há muito tempo, a tag canvas só recentemente começou a receber mais atenção dos desenvolvedores. Nos navegadores, agora podemos desenhar gráficos 3D sem usar nenhum plug-in, graças ao padrão WebGL.

Arte digital pode ser criada usando uma nova ferramenta que o Google introduziu. Um pequeno quadrado branco fica no centro da ferramenta de tela chamada “ Canna ”.

Vantagens de usar a tag <canvas>

Aqui estão algumas das principais vantagens:

A tag <canvas> permite que os desenvolvedores criem gráficos dinâmicos que podem ser atualizados e alterados em tempo real. Isso é especialmente útil para criar gráficos interativos ou visualizações que respondem à entrada do usuário.
Como a tag <canvas> é renderizada usando JavaScript, ela pode ser altamente otimizada para desempenho. Isso o torna ideal para a criação de gráficos que precisam ser renderizados de forma rápida e eficiente, como animações ou visualizações em tempo real.
A tag <canvas> é compatível com todos os principais navegadores da Web, incluindo Chrome, Firefox, Safari e Internet Explorer. Isso significa que você pode criar gráficos que funcionarão em uma ampla variedade de plataformas e dispositivos.
A tag <canvas> é altamente flexível, permitindo que os desenvolvedores criem uma ampla gama de gráficos e visualizações usando uma variedade de ferramentas e bibliotecas. Isso inclui tudo, desde formas e linhas simples até animações complexas e visualizações interativas.
Com as técnicas e ferramentas adequadas, os desenvolvedores podem garantir que os gráficos criados com a tag <canvas> sejam acessíveis a usuários com deficiências, como aqueles que usam leitores de tela.

Subscreva a nossa Newsletter abaixo, de forma a estar a par das últimas informações técnicas deste site.

Nós valorizamos o seu feedback.

Marca de tela em HTML – <canvas>

Example

Example

Usos e Definição

Notas e dicas

Compatibilidade do navegador

Atributos

Atributos Globais

Atributos do Evento

Configurações de CSS por padrão

Example

Vantagens de usar a tag <canvas>

Sentindo entediado?