DEV Community

Daniel Dormin
Daniel Dormin

Posted on

HTML5 Canvas - conceitos básicos

Olá você que me lê.

Esse vai ser o primeiro post de uma série sobre canvas do zero, basedo em livros, videos, posts e testes.

A cada conceito interessante ou importante, será escrito um post.

Como primeiro post vamos falar um pouco do que é o canvas e conceitos importantes para domina-lo.

O que é HTML5 Canvas?

Canvas é uma tag do HTML5 usada para definir um quadro de desenho gráfico 2D ou 3D, para fazer eses desenhos é necessario o uso do JavaScript, ou seja a tag canvas no HTML5 só reserva o espaço assim como outras tags.

É possivel ultilizar atributos globais nesta tag, como ID, Class, Style e por ai vai.

A tag canvas é escrita:

Contendo uma abertura e um fechamento.

Qual a vantagem de usar canvas sendo que posso desenhar com svg ou css?

Sendo o canvas um elemento dedicado para renderização de vários frames por segundo(fps), este tem a vantagem de ser mais performático do que outras formas de animação e interação gráficas dentro de projetos, não perdemos qualidade e nos dá a posibilidade criar animações, jogos e interações mais complexas.

Conceitos básicos

Cada conceito será melhor explicado com um post dedicado, abaixo está uma visão geral sobre o que precisamos aprender para dominar o canvas.

1- Criar e Mudar o tamanho do canvas

2- Desenhar elementos no canvas

3- Animar elementos no canvas

4- Interagir com os elementos do canvas

A partir do ponto que conseguirmos fazer esses quatro passos sem dificuldade é possivel criar jogos , animações e elementos interativos em nossos projetos web.

meu objetivo é começar por esse ponto e explorar todas as possibilidades que o JavaScript pode nos oferecer, essa linguagem tão estranha e tão maravilhosa ao mesmo tempo.

Obrigado por ler, duvidas sugestões ou criticas, aqui em baixo nos comentários ou por email. Terei o prazer em responder.

Referências:

Video -> Chris course

Livro -> Desenvolva jogos com HTML5 Canvas e JavaScript

Top comments (0)