Tela JavaScript

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: widthe heightque 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 widthe heightdo <canvas>elemento por meio de suas propriedades DOM:

const canvas = document.querySelector('#canvas');
const width = canvas.width;// 500
const height = canvas.height;// 300Linguagem de código:  JavaScript  ( javascript )

E você também pode alterar o widthe heightdo <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 xpara a direita e yao aumento para baixo.

Por padrão, o widthe heightdeterminar 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 fillStylee strokeStyledo 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 fillStylee StrokeStylepara definir os estilos para o contexto de desenho 2D.