Índice
O elemento Tela de pintura É uma das novidades mais esperadas que tem HTML5 Por ser uma alternativa séria ao plug-in Flash da Adobe, graças às suas capacidades nativas e por não depender de uma biblioteca de terceiros, ganhamos estabilidade e suporte ao navegador diretamente, no caso de um problema com a implementação do padrão HTML5 .O elemento Tela de pintura nos permite delimitar uma área em nossos documentos HTML5 onde podemos desenhar e até adicionar efeitos e movimentos através de Javascript.
O elemento Canvas
Antes de começar a trabalhar com o item Tela de pintura, vamos definir suas características básicas, temos que é um elemento de fluxo, é totalmente novo em HTML5, seus atributos são height pela sua altura e largura pela sua largura.
Vejamos abaixo um pequeno exemplo de como podemos definir um Canvas em nosso documento:
Exemplo Seu navegador não suporta o elemento tela de pintura Vamos ver rapidamente o que acontece no exemplo; primeiro, definimos um estilo onde atribuímos uma borda ligeiramente espessa para poder distinguir o nosso Tela de pintura vazio, então iniciamos o elemento Canvas com seu rótulo de abertura e definimos seus atributos de altura e largura, dentro dos rótulos colocamos uma mensagem caso o documento seja aberto com um navegador que não suporte esta especificação do padrão.
Vamos ver agora como esse código que acabamos de explicar se parece em nosso navegador:
Nosso primeiro desenho
Como mencionamos no início do tutorial, para desenhar e fazer ações dentro do Canvas devemos usar Javascript, para isso usaremos um método chamado getContext () que nos coloca no contexto do Canvas e com isso podemos dizer o que mostrar.
Podemos desenhar figuras tanto em 2D como em 3D, para isso passamos, no caso da primeira, o argumento "2d".
Vejamos o seguinte exemplo para definir melhor o que estamos explicando:
Exemplo Seu navegador não suporta o elemento tela de pintura Aqui, simplesmente definimos uma variável ctx para o qual vamos atribuir o objeto documento e o último vai chamar o método getContext e aplique-o no elemento Canvas; então temos que a variável ctx chama um método chamado fillRect e para isso passamos algumas coordenadas, se olharmos bem passamos 4 lados, vamos ver que desenhou isso no navegador:
