Primeiras aulas do curso Lógica de programação II: pratique com desenhos, animações e um jogo

Lógica de programação II: pratique com desenhos, animações e um jogo

Desenhando gráficos com Canvas - Visão geral do que veremos

Olá! Me chamo Flávio Almeida, e este treinamento é direcionado àqueles que terminaram a primeira parte do curso de Lógica de Programação e desejam praticar mais um pouco, para se aprimorarem nesta técnica.

Neste treinamento, aplicaremos o conceito de lógica de programação para criarmos desenhos em tela, como formas geométricas com diferentes cores, ou ainda, realizar pequenas animações em tela. Podemos também criar um jogo, como tiro ao alvo, onde temos um símbolo de alvo que se move pela tela e nosso objetivo é clicar sobre ele.

A ideia deste treinamento é utilizarmos conceitos de lógica, já aprendidos anteriormente, para aplicações diferentes.

Para fazermos isso, do zero, seria complicado. Sendo assim, as linguagens têm bibliotecas de instruções, em geral, que chamamos de APIs. Aprenderemos um pouco da API de gráficos do JavaScript para que possamos desenhar na tela.

Aplicaremos a lógica de programação para criar desenhos e animações, os "pincéis" e as "telas" são informações contidas nas bibliotecas. Vamos começar!

Desenhando gráficos com Canvas - O canvas será nossa tela!

Nosso primeiro passo nesta aula será criarmos nosso programa.html.

Abriremos nosso editor de texto e salvaremos o arquivo em nossa área de trabalho, com o nome programa.html.

Aqui estamos utilizando o Sublime 2, mas você pode utilizar qualquer editor de sua preferência.

Lembrando que, no curso anterior de Lógica de Programação, vimos que quando queremos escrever um código em JavaScript utilizamos as tags <meta charset=UTF-8"> e a <script> para podermos escrever nosso código.

Conforme vimos, tudo que está dentro da tag <script> pertence ao mundo JavaScript, e tudo que está fora - seja antes ou depois -, pertence ao mundo HTML.

Aprendemos no mundo JavaScript, a utilizar funções do mundo HTML por meio do document, por exemplo o document.write() que nos permite imprimir algo:

<meta charset="UTF-8">

<script>

document.write("");

</script>

Podemos, por exemplo, escrever a mensagem "Oi":

<meta charset="UTF-8">

<script>

document.write("<h1>Oi</h1>");

</script>

Salvaremos o programa e retornaremos ao navegador. Nele, escolheremos a opção de abrir arquivo, e selecionaremos o programa.html, assim, temos a seguinte exibição:

Oi

Entretanto, nosso objetivo não é escrever HTML no mundo HTML, em vez disso, queremos desenhar. Sendo assim, não utilizaremos o document.write().

Para desenhar precisamos: de uma tela e de um pincel.

Vamos acessar a página do Google e digitar "empty canvas". A palavra "empty" significa "vazio", em Português.

Observando os resultados, vemos que são exibidas imagens de telas em branco. Os mundos HTML e JavaScript utilizam o Inglês, por isso, as tags estão neste idioma, "canvas" também é uma tag do mundo HTML.

Se inserirmos em nosso código a tag <canvas>, ela é válida do mundo HTML e tem a mesma finalidade de uma tela em branco, ou seja, uma área em que podemos desenhar.

Como vamos trabalhar com desenhos, não iremos utilizar textos, não será necessária a inclusão da tag <meta charset="UTF-8">, que serve para resolvermos problemas de acentuação.

Assim, temos o mínimo para podermos começar a programar:

<canvas></canvas>

<script>

</script>

Recapitulando: O canvas é uma área da tela onde podemos desenhar, escrever com um pincel.

Precisamos informar, em nosso programa, quanto o <canvas> ocupa de espaço. Para isso, utilizaremos dois atributos, o width, que em português é "largura", diremos que é 600, e o height, ou "altura", que será de 400.

Se salvarmos e recarregarmos a página, nada acontece para nós, visualmente. Isso porque o <canvas> é branco, por padrão. Como o fundo do navegador também é, não conseguimos ver o que acabamos de criar.

Para que possamos visualizar, faremos com que ele ganhe cor. É o que veremos adiante.

Desenhando gráficos com Canvas - Desenhando com um pincel

Nesta aula, aprenderemos a desenhar utilizando um pincel.

Nas aulas anteriores, aprendemos que o document possui uma função que nos permite utilizar algo do mundo HTML dentro do mundo JavaScript.

Para isso, criaremos a variável tela, e pediremos ao document.querySelector() o parâmetro "canvas" - note que está entre aspas:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");

</script>

JavaScript pode utilizar tanto as aspas ("), quanto apóstrofo ('), que nos referimos como aspas simples. É o que utilizaremos até o final do treinamento, apenas para simplificar a digitação.

Assim, o documento tem o <canvas> e, dentro do JS, pedimos para o document executar a função querySelector() para pegar este <canvas> e passá-lo como valor na variável tela.

Isso nos dá a área para escrever, mas e o pincel? Criaremos uma variável pincel, que receberá como valor a tela:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.

</script>

A tela, assim como o document sabe buscar um elemento da página por meio da tag, e fornecer um retorno para a variável, poderá passar o pincel.

No mundo da programação podemos ter gráficos em 2D, 3D, 4D, enfim, portanto, precisamos informar à tela qual o tipo de pincel, ou seja, o contexto no qual escreveremos na tela. Para isso, utilizaremos o getContext() e passaremos o 2d como parâmetro:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');

</script>

Já temos a tela e o pincel, portanto podemos escrever na tela.

Se o pincel foi dado pelo <canvas>, qualquer operação feita nele atuará sobre a tela.

Nossa primeira operação será desenhar um retângulo de dimensões 600x400, para preencher todo o <canvas>. Para fazer isso, chamaremos o pincel, e pediremos para ele, com o operador ., preencher o retângulo.

Preencher em Inglês é "fill", enquanto "rect" é a abreviação de retângulo:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');

    pincel.fillRect();
</script>

Ou seja, estamos pedindo ao JavaScript para preencher um retângulo. Entretanto, precisamos informar ao programa o ponto da tela onde desejamos começar a preencher.

Assim como um pintor inicia sua pintura em um ponto específico da tela, nós também precisamos posicionar nosso pincel no <canvas> para podermos iniciar nosso preenchimento.

Como sabemos, na matemática trabalhamos com a ideia de planos cartesianos, onde temos um eixo x, na horizontal, e um eixo y, na vertical.

De acordo com as dimensões que especificamos, começaremos nosso preenchimento no canto superior esquerdo, isso significa que iniciaremos no ponto 0 tanto no eixo x quanto y.

No código, estas coordenadas são inseridas entre os parênteses da instrução pincel.fillRect():

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');

    pincel.fillRect(0, 0);

</script>

Dessa coordenada, queremos criar uma forma que tenha 600 de largura, e 400 de altura, portanto, inseriremos isto em nosso código:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');

    pincel.fillRect(0, 0, 600, 400);

</script>

Salvaremos o programa e recarregaremos a página, e vemos na tela um retângulo preto, com as dimensões 600 (largura) x 400 (altura), posicionando o pincel a partir do ponto mais extremo no canto superior esquerdo.

Como estamos utilizando o fill, ou "preencher", ele completa o restante da área com preto.

Só que, a cor preta é muito forte, colocaremos uma cor mais suave. Para indicar qual a "tinta", temos de indicar o fillStyle:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');

    pincel.fillRect(0, 0, 600, 400);
    pincel.fillStyle

</script>

Diferentemente de fillRect(), de getContext(), ou de querySelector(), o fillStyle não é uma função, e sim o que chamamos de propriedade. É equivalente a uma variável, por receber um valor, que é a cor. No caso, utilizaremos o 'lightgrey':

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');

    pincel.fillRect(0, 0, 600, 400);
    pincel.fillStyle = 'lightgrey';

</script>

Salvaremos e recarregaremos a página. Entretanto o retângulo continua preto, por quê?

Pensando em uma situação real, se pedimos para alguém pintar algo, a pessoa precisará da tinta. No caso, estamos passando as informações de cor após termos pintado, sem termos fornecido a tinta.

Sendo assim, o fillStyle deve vir antes do fillRect:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 600, 400);

</script>

Salvaremos e recarregaremos. Deu certo! Temos nosso <canvas> em cinza claro. Qualquer desenho que fizermos respeitará a área que delimitamos nas dimensões.

Aumentaremos as dimensões, para 800 de largura e 600 de altura:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 800, 600);

</script>

Salvaremos e recarregaremos a página. Não aconteceu nada. Isso porque, por mais que tenhamos informado novas dimensões, o máximo que caberá em nosso <canvas> é 600x400, portanto, respeitaremos isso.

Sobre o curso Lógica de programação II: pratique com desenhos, animações e um jogo

O curso Lógica de programação II: pratique com desenhos, animações e um jogo possui 89 minutos de vídeos, em um total de 43 atividades. Gostou? Conheça nossos outros cursos de Lógica em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Lógica acessando integralmente esse e outros cursos, comece hoje!

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso completo por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas