Guia de início rápido: desenhando em uma tela (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

O elemento tela produz uma tela retangular de bitmaps em sua página onde você pode usar JavaScript para desenhar imediatamente imagens gráficas. A tela é ótima para criar jogos ou qualquer situação na qual você está gerando elementos gráficos em tempo real ou mudando-os regularmente.

Este guia de início rápido contém as seguintes seções:

  • Pré-requisitos
  • O elemento tela
  • Contextos de renderização
  • Desenhando retângulos
  • Usando caminhos
  • Desenhando arcos
  • Desenhando curvas
  • A curva quadrática
  • A curva cúbica de bezier
  • Próximas etapas

Pré-requisitos

Este tópico considera que você já saiba criar um aplicativo básico da Windows Store em JavaScript que usa o modelo da Biblioteca do Windows para JavaScript e tenha noções básicas sobre HTML e JavaScript. Para obter instruções sobre como criar o seu primeiro aplicativo da Windows Store em JavaScript, veja Criar seu primeiro aplicativo Web. Para obter instruções sobre como usar o modelo WinJS, veja Como obter e usar o kit de ferramentas WinJS.

O elemento tela

O elemento tela produz uma tela retangular de bitmaps em sua página onde você pode usar JavaScript para produzir imagens gráficas imediatamente.

O elemento de tela tem atributos de largura e altura. Ambos são opcionais e podem ser definidos usando as propriedades Document Object Model (DOM). Se você não definir os atributos de largura e altura, a tela aparece com seu tamanho padrão de 300 pixels de largura e 150 pixels de altura.

<canvas id="canvas" width="150" height="150"></canvas>

O atributo de ID não é parte do elemento da tela mas é usado para identificar o elemento de tela em seu script.

Você pode definir o tamanho da tela usando Folha de Estilo em Cascata (CSS). Por padrão, o seu aplicativo renderiza o elemento da tela sem conteúdo ou borda - ele é completamente transparente. Contudo, você pode definir o estilo como de qualquer imagem normal especificando a margem, borda, tela de fundo etc. Definir o estilo não afeta o desenho real na tela.

Contextos de renderização

Adicionar um elemento de tela ao seu aplicativo só cria uma superfície de desenho transparente. Para desenhar na tela, você obtém um contexto de renderização da tela e o usa para desenhar. Há tipos diferentes de contextos de renderização que permitem que você desenhe de formas diferentes. Por exemplo, há um contexto 2-D para elementos gráficos 2-D e um contexto 3-D para elementos gráficos 3-D. Os exemplos neste tópico usam o contexto de renderização 2-D.

Para obter um contexto de renderização, você pode chamar o método getContext da tela, como mostrado no exemplo seguinte:

var canvas = document.getElementById("quickstart");
var context = canvas.getContext("2d");

Em nosso exemplo, começamos usando getElementById para recuperar o nó DOM da tela e depois usamos o método getContext para acessar o contexto de renderização. O método getContent tem um parâmetro, o tipo de contexto. Em nosso exemplo é ‘2d’.

Após você ter obtido um contexto de renderização, você pode usá-lo para desenhar. As próximas seções descrevem como desenhar tipos diferentes de formas.

Desenhando retângulos

Existem duas funções que são usadas para desenhar retângulos em uma tela:

  • fillRect

    fillRect (x, y, width, height)

    O método desenha um retângulo preenchido.

    O parâmetros x, y são coordenadas que posicionam o retângulo na tela e estão relativos ao canto superior esquerdo da tela. A largura e a altura são medidas em pixels.

  • strokeRect

    strokeRect(x, y, width, height)

    Os parâmetros strokeRect são os mesmos do fillRect. A diferença que é o strokeRect desenha somente o contorno de um retângulo.

Este método colore uma forma especificada:

  • fillStyle

    fillStyle = color

    O método fillStyle usa um único parâmetro para preencher uma forma com uma cor. A cor pode ser definida usando RGB, uma cor predefinida, como "vermelha", "azul" etc., uma cor hexadecimal ou mesmo um gradiente. Para obter exemplos do fillStyle, veja o exemplo sobre como desenhar retângulos abaixo.

Este método limpa a área especificada e a torna totalmente transparente:

  • clearRect

    clearRect(x, y, width, height)

    Como nos métodos fillRect e strokeRect, os parâmetros clearRect x e y posicionam a área retangular como transparente e definem a largura e altura do retângulo.

Exemplo

Vamos começar com um exemplo que produzirá uma tela e desenhará dois quadrados preenchidos; um quadrado dourado e um quadrado roxo transparente. CSS será usado para criar uma borda preta ao redor da tela:

Dois quadrados preenchidos.

O exemplo começa declarando um elemento de tela no <body> do HTML. Ao elemento de tela é atribuída um atributo de id chamado "tela" e os atributos de altura e largura do elemento são definidos como 100 pixels:

<body>
   <canvas id="canvas" width="100" height="100" />
</body>

O elemento de tela é criado com um pixel de largura, com borda preta sólida usando um CSS. O CSS deve estar contido em um arquivo externo para tornar a carga do arquivo tão eficiente quanto possível:

/* style the canvas element with a black border. */
canvas { border: 1px solid black; }

O nosso código JavaScript, que desenha os dois retângulos preenchidos na tela também está contido em um arquivo externo. Ele começa após o documento HTML ser carregado usando o manipulador de eventos de carga de janela para chamar a função de desenho.

window.onload = draw;

O método de desenho pega o elemento de tela usando o método getElementById. Em seguida, ele chama o método getContext para obter o contexto do desenho. você precisa passar a cadeia de caracteres "2d" para o método getContext.

Toda tela tem um contexto de desenho. O contexto de desenho é onde todos os métodos e propriedades de desenho são definidos.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D drawing context.
var context = canvas.getContext("2d");

Para começar a desenhar o primeiro quadrado, o fillStyle é definido com uma cor. Há algumas formas de preencher um retângulo. Em nosso exemplo, estamos usando o equivalente RGB de ouro:

context.fillStyle = "rgb(255, 215, 0)";

Essas são algumas outras formas de definir o fillStyle.

  • Se estiverem disponíveis, você pode usar cores predefinidas como "amarela", "laranja", "roxa", etc.:

    context.fillStyle = "gold";

  • Ou use a representação hexadecimal do formato de cor #RRGGBB:

    context.fillStyle = "#FFD700";

    Este número hexadecimal é uma cor dourada intensa.

  • Embora não seja pensado como uma cor, você pode usar um gradiente para seu fillStyle:

    var myGradient=context.createLinearGradient(20, 20, 100, 0);

myGradient.addColorStop(0,"goldenrod");
myGradient.addColorStop(1,"white");

context.fillStyle = myGradient;

    Este exemplo cria um gradiente linear, define as marcas de cor e faz com que o retângulo seja desenhado com a cor sendo esmaecida de amarela-solidago para branca.

    Dois quadrados preenchidos.

  • O fillStyle padrão é preto sólido.

Em seguida, desenhamos o retângulo usando o método fillRect. Os valores fillRect começam a desenhar um retângulo cheio definindo as coordenadas x e y para o topo da esquerda do retângulo em 15, 15. As coordenadas x, y são relativas ao canto esquerdo superior da tela. A largura e a altura do retângulo é definida como 55 e 50 pixels respectivamente:

context.fillRect (15, 15, 55, 50);

Para o segundo retângulo, o fillStyle é definido como o equivalente de RGB de roxo. O quarto valor, o “A”, ou Alpha, em RGBA, é definido como 0,5 e determina a opacidade da cor. Os valores válidos de Valid são de 0,0 (totalmente transparentes) a 1,0 (totalmente opacos):

context.fillStyle = "rgba(0, 0, 200, 0.5)"

Os valores fillRect começam desenhando nas coordenadas x e y no canto esquerdo superior do retângulo em 40, 40. A largura e altura do retângulo são definidas como 45 e 40 pixels respectivamente:

context.fillRect (40, 40, 45, 40);

Esses são os exemplos de código completos:

Este é o código JavaScript. Em nosso exemplo este arquivo seria nomeado myJavascript.js:

window.onload = draw;   

// This function is called on page load.
function draw() {

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2d drawing context.
    var context = canvas.getContext("2d");

    // Set the color to the RGB equivalent of gold.
    context.fillStyle = "rgb(255, 215, 0)";

    // Draw the rectangle.
    context.fillRect (15, 15, 55, 50);

    // Set the color to the RGB equivalent of purple and
    // set the opacity of the rectangle to 50 percent.
    
    context.fillStyle = "rgba(0, 0, 200, 0.5)"

    // Draw the rectangle.
    context.fillRect (40, 40, 45, 40);
}

Este é o arquivo HTML:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js" defer="defer"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="100" height="100" />
    </body>
</html>

Usando Caminhos

O método beginPath começa com um novo caminho e usa métodos adicionais como moveTo, lineTo ou arc para desenhar uma combinação de linhas, curvas e outras formas.

Uma vez que um caminho é criado, você pode usar os métodos fillStyle ou strokeStyle para renderizar o caminho para a tela.

Exemplo

Este exemplo usará desenhar um triângulo marrom:

Um triângulo preenchido

Nós usaremos os mesmos arquivos HTML e CSS como usamos para o primeiro exemplo. Em nosso arquivo JavaScript myJavascript usaremos a mesma função de desenho e a chamaremos novamente após o HTML carregar.

Após obter o elemento de tela e especificar um tipo de tela 2-D, iniciaremos a desenhar o triângulo marrom chamando o método beginPath.

context.beginPath();

Internamente, os caminhos são armazenados como uma lista de subcaminhos (linhas, arcos etc) que juntos formam uma forma. Sempre que o método beginPath é chamado, a lista é reinicializada e nós iniciamos a desenhar novas formas.

Antes de desenhar linhas, você precisará chamar a função moveTo. A função moveTo não desenha nada, ela é como colocar uma caneta ou lápis no local que você quer começar a desenhar o triângulo.

context.moveTo(28, 20);

O moveTo usa dois argumentos, as coordenadas x e y. Eis como nós definimos as coordenadas x para 28 e y para 20. As coordenadas são relativas à borda da tela que você está desenhando.

Agora, desenharemos as linhas do triângulo usando a função lineTo. Como a função moveTo, a função lineTo tem dois argumentos, as coordenadas x e y, que são os pontos finais da linha que estamos desenhando:

context.lineTo(78, 50); 
context.lineTo(28, 78); 
context.lineTo(28, 20);

Em nosso exemplo, definimos a propriedade fillStyle com um valor hexadecimal para marrom. Conforme discutido na seção Desenhar Retângulos, a propriedade fillStyle pode ser uma cor hexadecimal RGB, uma cor predefinida ou um gradiente.

context.fillStyle = "#996633";

Estamos usando a fillStyle para pintar um triângulo de cor marrom. Poderíamos usar a função strokeStyle que só pintaria o contorno da forma.

Agora desenhe a forma de triângulo.

context.fill();

Aqui está o código inteiro JavaScript:

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2-D canvas type.
    var context = canvas.getContext("2d");
           
    // Add the brown triangle.
    context.beginPath();
    context.moveTo(28, 20);
    context.lineTo(78, 50); 
    context.lineTo(28, 78); 
    context.lineTo(28, 20); 
          
    // Set the color to the hexadecimal equivalent of brown.
    // Omit this step and the triangle will render 
    // the default color of black.
    context.fillStyle = "#996633";

    // Draw the triangle.
    context.fill();

Desenhar arcos

Para desenhar arcos ou círculos, usamos o método arc:

context.arc(x, y, radius, startingAngle, endingAngle, antiClockwise);

Esse método aceita cinco parâmetros:

  • X e y são as coordenadas do centro do círculo.
  • O raio é a distância do centro do círculo até um ponto no círculo.
  • Os parâmetros startingAngle e endingAngle definem os pontos de início e de término do arco em radianos, que são medidos do eixo x.
  • O parâmetro antihorário é um valor booleano que, quando verdadeiro, desenha o arco no sentido antihorário, caso contrário, no sentido horário.

Exemplo

Este exemplo desenhará um círculo azul.

Um círculo azul

Após obter o elemento de tela e especificar um tipo de tela 2-D, começamos a desenhar o nosso círculo chamando o método beginPath.

context.beginPath();

Os nossos exemplos anteriores de retângulo e triângulo que usamos a função fillStyle para preencher e colorir as formas. Neste exemplo definimos a cor RGB como azul e desenhamos só o contorno do círculo usando strokeStyle.

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

A função arco é definida da seguinte forma:

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

Onde:

  • As coordenadas x e y posicionam o centro do círculo em 50, 50, respectivamente.
  • O raio do círculo está definido como 32.
  • O início e o final do círculo estão definidos como 0 e "2 * Math.PI" radianos, que é um círculo completo.
  • O parâmetro antihorário é definido como verdadeiro, não é muito importante ao desenhar um círculo completo, mas definitivamente seria importante para a parte de um arco.

Finalmente, a função stroke é usada para desenhar o círculo que acabamos de definir:

// draw the circle.
context.stroke();

O nosso círculo se parecerá assim se somente desenharmos ½ do arco ou de zero a Math.PI:

// Define the circle using an arc.
context.arc(50, 50, 32, 0, Math.PI, true);

Círculo meio desenhado.

Este é o código Javascript. Novamente, este código estaria contido em uma função de desenhar que é chamada após a página HTML ser carregada. Veja a seção Desenhar Retângulos para um exemplo completo dos arquivos HTML ou JavaScript.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
          
// Start the path.
context.beginPath();

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

// draw the circle.
context.stroke();

Desenhar curvas

As curvas são usadas para desenhar formas complexas. Há dois tipos de curvas; Bezier ou cúbica, e quadratic. As duas possuem um ponto inicial e final na tela, contudo como a curva é desenhada se baseia em um ponto ou pontos de controle. A curva quadratic tem um ponto de controle, enquanto que uma curva cúbica de Bezier usa dois pontos de controle. As curvas estão sempre contidas em um caminho.

A curva quadrátca

Aqui está o método quadraticCurveTo:

quadraticCurveTo(cp1x, cp1y, X, Y)

Os quatro parâmetros são dois pares de coordenadas X, Y, o primeiro; cp1x e cp1y é a localização do ponto de controle da curva e o segundo par é a localização do final da curva.

Assim como com todas as formas, a curva é iniciada com um método moveTo(x, y) que fornece as coordenadas x e y do início da curva.

Duas linhas imaginárias tangenciais são desenhadas a partir dos pontos finais ao ponto de controle. A curva é desenhada por uma linha conforme se move ao redor da tangencial:

Um ponto de controle do quadrante.

Exemplo

Este exemplo usa uma série de métodos quadraticCurveTo para desenhar uma figura abstrata com uma base ondulada. Note que quanto mais perto os pontos de controle estiverem do ponto final, menor a curva se torna na base ondulada.

Uma curva quadrática.

Começamos pegando o elemento da tela e especificando um tipo de tela 2-D. Em seguida, criamos o caminho chamando o método beginPath.

context.beginPath();

E definimos o nosso ponto inicial para a primeira curva nas coordenadas x e y de 75 e 25, respectivamente.

context.moveTo(75, 25);

Cada uma das curvas quadratic é definida da seguinte forma:

context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

Onde cada um dos parâmetros é:

  • cp1x
    A coordenada x do ponto de controle.

  • cp1y
    A coordenada y do ponto de controle.

  • x
    A coordenada x do ponto final da curva.

  • y
    A coordenada y do ponto final da curva.

Note que a ordem que a curva é desenhada é importante. Você pode remover uma curva ou duas ou mudar a ordem em que elas são desenhadas para ver como as curvas são construídas.

A cor é definida como verde definindo fillStyle igual aos valores RGB para verde.

context.fillStyle = "rgb(100, 200, 50)";

Finalmente a forma é colorida com a função fill:

context.fill();

Note que para este exemplo e para o próximo o tamanho da tela foi aumentado para 150 por 150 pixels:

<canvas id="canvas" width="150" height="150" />

Este é o exemplo completo.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
         
// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75,25);

// Set each of the curves.        
context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

// Set the color of the image to green.
context.fillStyle = "rgb(100, 200, 50)";

// Draw the image.
context.fill();

A curva cúbica de bezier

Este é o método bezierCurveTo:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Os seis parâmetros são três pares de coordenadas X, Y; cp1x e cp1y é a localização do primeiro ponto de controle na curva, cp2x e cp2y é a localização do segundo ponto de controle e o terceiro par é a localização do fim da curva.

A curva começa com as coordenadas x e y no método moveTo(x, y).

As linhas tangenciais imaginárias são desenhadas dos pontos de controle para os pontos finais. A curva é desenhada por uma linha conforme ela se move ao redor de linhas tangenciais como mostrado por linhas roxas na ilustração:

Pontos de controle cúbicos.

Exemplo

Este exemplo usa uma série de métodos bezierCurveTo para desenhar uma figura abstrata com uma base ondulada.

Um exemplo de curva cúbica.

Após obtermos o elemento de tela e especificar um tipo de tela 2-D, criamos o caminho chamando o método beginPath.

context.beginPath();

E definimos o nosso ponto inicial para a primeira curva nas coordenadas x e y de 75 e 25, respectivamente.

context.moveTo(75, 25);

Cada uma das curvas cúbicas de Bezier é definida da seguinte forma:

context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

Onde cada um dos parâmetros é:

  • cp1x
    A coordenada x do primeiro ponto de controle de Bézier.

  • cp1y
    A coordenada y do primeiro ponto de controle de Bézier.

  • cp2x
    A coordenada x do segundo ponto de controle de Bézier.

  • cp2y
    A coordenada y do segundo ponto de controle de Bézier.

  • x
    A coordenada x do ponto final da curva.

  • y
    A coordenada y do ponto final da curva.

Note que a ordem que a curva é desenhada é importante. Você pode remover uma curva ou duas ou mudar a ordem em que elas são desenhadas para ver como as curvas são construídas.

A cor é definida como vermelho definindo fillStyle igual aos valores de vermelho em RGB.

context.fillStyle = "rgb(200, 0, 0)";

Finalmente, a forma é colorida com a função de preencher:

context.fill();

Note que para este exemplo, o tamanho da tela foi aumentado para 150 por 150 pixels:

<canvas id="canvas" width="150" height="150" />

Este é o exemplo de código completo:

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");

// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75, 25);
 
// Set each of the curves.
context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

// Set the color of the image to red.
context.fillStyle = "rgb(200, 0, 0)";

// Draw the image.
context.fill();

Próximas etapas

Neste início rápido, adicionamos um elemento de tela para criar uma superfície de desenho transparente, criamos uma borda ao redor usando CSS e usamos JavaScript para desenhar imagens gráficas nele.

Obtivemos um contexto de desenho 2-D do elemento de tela para definir fillRect e fillStyle para desenhar retângulos. Definimos fillStyle em várias formas para colorir os elementos gráficos como RGB, valores hexadecimais, cores predefinidas e um gradiente.

Vimos como o método beginPath começa um novo caminho e usa métodos adicionais como moveTo, lineTo ou arc para desenhar uma combinação de linhas, círculos e curvas.

Uma vez que o caminho foi criado, usamos os métodos fillStyle e strokeStyle para renderizar o caminho para a tela.

Em seguida, você aprenderá como animar elementos gráficos da tela e como criar um gradiente.

Como animar elementos gráficos da tela

Como criar um gradiente