.. _canvas:
Desenhando no Canvas HTML com JavaScript
========================================
Nessa aula vamos introduzir as seguintes ferramentas para programação
gráfica: HTML, CSS, JavaScript e o elemento canvas do HTML. Embora essas
ferramentas sejam muito relevantes nessa disciplina, pois afinal serão usadas para desenvolver os exercícios práticos, elas não constituem nosso foco principal.
Por isso, nessa aula vamos apenas introduzir as
ferramentas por meio de exemplos ilustrando alguns recursos básicos.
Você pode copiar e estender esses exemplos mais tarde para realizar os
exercícios.
Para aprender mais detalhes dessas ferramentas recomendamos os seguintes
links:
- `Tutorial do
canvas `__
- `Uma reintrodução ao
JavaScript `__
- `Tutorial de
HTML `__
.. _introducao:
Como criar uma área de desenho no HTML?
---------------------------------------
Vamos usar o canvas para desenhar gráficos raster em uma página web, escrita em HTML.
Nesse curso vamos usar o canvas para gerar desenhos 2D/3D e
animações usando JavaScript e WebGL.
A seguir vamos introduzir um esqueleto HTML que cria um canvas (área
de desenho) para começar a desenhar em 2D, usando algumas primitivas
gráficas comuns.
Esqueleto HTML para usar o canvas
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
A sigla HTML significa ``HyperText Markup Language``, ou seja, é uma
linguagem que permite criar hipertexto como links URL e outros elementos
como o próprio canvas usando ``tags``.
O documento HTML abre e fecha usando as tags ```` e ````.
Dentro de cada tag você pode definir algumas opções para configurar o
elemento HTML, como no tag ```` no exemplo abaixo.
A parte delimitada por ```` e ```` não é exibida pelo
navegador quando a página é carregada. Ela tipicamente contém:
- um título delimitado pelas tags `` ``);
- links para os `arquivos CSS `__ usados para
configurar os estilos usados pelos elementos da página, com extensão ``.css``;
- e outros meta-dados. No nosso caso, deve conter também o arquivo que
contém os programas em JavaScript, como o ``meu_script.js``. Observe que os arquivos em JavaScript tem a extensão ``.js``.
O trecho delimitado por `` `` é a parte que será exibida
pelo navegador. Para criar um canvas basta copiar o seguinte trecho de
código HTML para um arquivo ``index.html``. Observe que no corpo
(````) precisamos incluir uma tag `` ``.
No exemplo incluímos também outros tags para você se divertir ainda mais.
**Exemplo de um esqueleto HTML usando o canvas**
.. code:: html
Meu primeiro canvas
Meu primeiro canvas
Um parágrafo
item um
item dois
outro item dois
tchauzinho...
Usando arquivos CSS para formatar elementos do HTML
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Os arquivos de estilo no formato `CSS (Cascading Stylesheets) `__
facilitam a formatação de sua página.
Salve o trecho abaixo em um arquivo ``webgl.css`` na mesma pasta do seu
arquivo ``index.html``, e brinque um pouco, por exemplo, mudando algumas
cores de ``black`` para ``red`` ou ``green``. Para isso, abra o arquivo
com um editor de texto de sua preferência.
A sintaxe do CSS é
relativamente simples. Basta, para cada elemento, criar um dicionário de nomes e valores. Assim, para o elemento "canvas", esse arquivo ``webgl.css``
define algumas de suas propriedades, nesse caso, "border" e
"background-color". Para o elemento "h3", o arquivo define "color".
Para saber mais, consulte materiais disponíveis na Internet, como esses
`tutoriais da Mozilla `__.
Para a maioria dos nossos exemplos e exercícios, o uso de CSS é facultativo e talvez seja suficiente definir as propriedades desejadas em tags de estilo `(style) `__.
**Exemplo de um arquivo css**
.. code:: css
canvas {
border: 2px solid black;
background-color: yellow;
}
h3 {
color: green;
}
Desenhando no canvas usando JavaSCript
--------------------------------------
O JavaScript é uma linguagem de script (``scripting language``) criada
para a Web. Toda vez que uma página mostra algo "dinâmico" (como updates
de tempos em tempos) ou algo "interativo" (como um mapa), seu navegador deve
estar executando um script em
`JavaScript `__.
O exemplo a seguir mostra o conteúdo do arquivo ``meu_script.js`` que foi usado no arquivo HTML fornecido anteriormente.
Crie um arquivo com esse mesmo nome na mesma pasta dos arquivos anteriores e salve o código abaixo nesse arquivo.
**Conteúdo do arquivo** ``meu_script.js``
.. code:: javascript
//
// Meu script desenha alguma coisa no canvas
//==================================================================
// variáveis globais
var ctx; // contexto de desenho
// função principal
function main() {
// veja o canvas id definido no arquivo index.html
const canvas = document.querySelector('#meucanvas');
// vamos definir um contexto para desenhar em 2D
ctx = canvas.getContext('2d');
let cor = 'blue'
desenhe_rect( cor, 20, 40, 160, 80 );
cor = 'green'
desenhe_rect( cor, 100, 60, 300, 160 );
}
// outras funções
function desenhe_rect( cor, left, top, right, bottom ) {
// recebe uma cor e desenha um retângulo
ctx.fillStyle = cor;
ctx.fillRect( left, top, right, bottom );
}
// Chamada da função principal, executada quando o arquivo é carregado
// em JavaScript.
main();
Discussão
~~~~~~~~~
Nesse e em futuros exemplos vamos adotar um esqueleto e sintaxe que se assemelham a programas em C e Python. Além de facilitar o entendimento desses exemplos por programadores que dominam outras linguagens, esperamos com isso facilitar sua transição para o JavaScript. Dessa forma, nossos exemplos sempre vão conter uma função ``main()``, **sempre** definida no início do arquivo e que é chamada na última linha do arquivo.
Essa é a **única** função a ser chamada durante o carregamento do arquivo pelo navegador. Todas as demais funções são chamadas a partir da ``main()``.
Para definir uma função em JavaScript devemos usar o comando ``function``. Várias funções diferentes podem ser definidas, em qualquer ordem, após a ``main()``.
Observe nesse exemplo que, ao programar em JavaScript, devemos também:
- terminar cada comando com um ponto-e-vírgula (``;``)
- indicar o início e fim de cada bloco usando chaves
Em JavaScript, as variáveis precisam ser declaradas como ``var``,
``let`` ou ``const``. As definidas como ``var`` são **variáveis globais** e
as demais são consideradas **locais**, ou seja, seus nomes são válidos
apenas dentro da função onde foram definidas. As variáveis do tipo ``const`` são
**constantes**, ou seja, seus valores não devem ser alterados depois de
criados.
O canvas no HTML foi criado com :math:`640 \times 480` (``width``
:math:`\times` ``height``) pixels em um sistema de coordenadas com o
eixo ``x`` para a direita e ``y`` para baixo como:
.. figure:: figuras/a04/Canvas_default_grid.png
:alt: Coordenadas no Canvas
:width: 50%
:name: fig-CoordenadasCanvas
:align: center
Coordenadas no Canvas (reproduzido de `Tutorial do Canvas `__)
Desenhando no canvas
--------------------
Antes de desenhar algum elemento gráfico, como uma linha ou um
retângulo, é necessário definir todas as propriedades desejadas do
elemento. Nesse exemplo, apenas a cor usada para preenchimento foi
definida (``fillStyle``).
- strokeRect(x, y, w, h): desenha o contorno do rectangulo
Paths
beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100,
25); ctx.fill(); # fecha o path
ctx.stroke();
Template literals
-----------------
- usa crase como delimitador e pode usar ${var}
..
#################################################################
Exercícios
----------
1. Escreva um programa em JavaScript (+ HTML) que cria um canvas de tamanho :math:`300 \times 300` e desenha a aproximação de um círculo de raio 100 usando 8 segmentos de reta. Depois disso, altere esse número para 16, 32, 64 segmentos para ver o que acontece com a qualidade visual desse círculo.