Resumo : neste tutorial, você aprenderá sobre HTML Canvas e como usar JavaScript para desenhar no canvas.
Introdução ao elemento HTML5 Canvas
HTML5 apresenta o <canvas>
elemento que permite desenhar gráficos 2D usando JavaScript.
O <canvas>
elemento requer pelo menos dois atributos: width
e height
que especificam o tamanho da tela:
<canvas width="500" height="300" id="canvas"></canvas>
Linguagem de código: HTML, XML ( xml )
Como outros elementos, você pode acessar as propriedades width
e height
do <canvas>
elemento por meio de suas propriedades DOM:
const canvas = document.querySelector('#canvas');
const width = canvas.width;// 500
const height = canvas.height;// 300
Linguagem de código: JavaScript ( javascript )
E você também pode alterar o width
e height
do <canvas>
elemento usando os métodos DOM:
canvas.width = 600;
canvas.height = 400;
Conteúdo alternativo
Ao contrário do <img>
elemento, o <canvas>
elemento requer a tag de fechamento </canvas>
. Qualquer conteúdo entre as tags de abertura e fechamento é conteúdo substituto que será exibido somente se o navegador não suportar o <canvas>
elemento. Por exemplo:
<canvas width="500" height="300" id="canvas">The browser doesn't support the canvas element</canvas>
Linguagem de código: HTML, XML ( xml )
Hoje em dia, a maioria dos navegadores modernos suporta o <canvas>
elemento.
O contexto de renderização
Inicialmente, a tela está em branco. Para desenhar algo, você precisa acessar o contexto de renderização e utilizá-lo para desenhar na tela.
O <canvas>
elemento apresenta o getContext()
método que retorna um objeto de contexto de renderização.
O getContext()
leva um argumento que é o tipo de contexto. Por exemplo, você usa "2d"
para obter um objeto de contexto de renderização 2D, que é uma instância da CanvasRenderingContext2D
interface.
O contexto de renderização 2D permite desenhar formas, texto, imagens e outros objetos.
O exemplo a seguir mostra como selecionar o elemento canvas usando o querySelector()
método e acessar o contexto do desenho chamando seu getContext()
método:
let canvas = document.querySelector('#canvas');
let ctx = main.getContext('2d');
Linguagem de código: JavaScript ( javascript )
Verifique o suporte da tela
Ao utilizar o <canvas>
elemento, é importante verificar se o navegador suporta o getContext()
método. Para fazer isso, você usa o seguinte código:
let canvas = document.querySelector('#main');
if(canvas.getContext) {
let ctx = main.getContext('2d');
}
Linguagem de código: JavaScript ( javascript )
O contexto 2D
O contexto de desenho 2D apresenta métodos para desenhar formas 2D simples, como caminhos, retângulos e arcos.
As coordenadas em um contexto 2D começam no canto superior esquerdo do <canvas>
elemento, que é o ponto (0,0), conforme mostrado na imagem a seguir:
Todos os valores das coordenadas são calculados em relação ao (0,0)
aumento x
para a direita e y
ao aumento para baixo.
Por padrão, o width
e height
determinar o número de pixels está disponível em cada direção.
Preenchimentos e traços
Preencher e traçar são duas operações básicas de desenho no contexto de desenho 2D.
- Preencher preenche a forma com um estilo específico, como cor, gradiente e imagem.
- O traço adiciona cores às bordas da forma.
As propriedades fillStyle
e strokeStyle
do contexto do desenho 2D determinarão os estilos de preenchimento e traçado.
Você pode definir essas propriedades para uma string, um objeto gradiente ou um objeto padrão. Por padrão, ambos são definidos com um valor de '#000000'
.
A seguir ilustramos como definir os estilos de preenchimento e traçado para o contexto de desenho 2D e desenhar um retângulo.
(() => {
const canvas = document.querySelector('#main');
if (!canvas.getContext) {
return;
}
// get the context
let ctx = canvas.getContext('2d');
// set fill and stroke styles
ctx.fillStyle = '#F0DB4F';
ctx.strokeStyle = 'red';
// draw a rectangle with fill and stroke
ctx.fillRect(50, 50, 150, 100);
ctx.strokeRect(50, 50, 150, 100);
})();
Linguagem de código: JavaScript ( javascript )
Clique aqui para ver a demonstração da tela .
Observe que você aprenderá como desenhar um retângulo em um tutorial posterior.
Resumo
- Use o elemento canvas HTML5 para desenhar gráficos 2D.
- Use
getContext('2d')
para obter o contexto de desenho 2D para desenhar gráficos 2D na tela. - Use as propriedades
fillStyle
eStrokeStyle
para definir os estilos para o contexto de desenho 2D.