Ir para o conteúdo
ou

Software livre Brasil

 Voltar a Blog de Thia...
Tela cheia

A tag canvas, desenhando com Javascript

27 de Dezembro de 2014, 11:00 , por Software Livre Brasil - 0sem comentários ainda | Ninguém está seguindo este artigo ainda.
Visualizado 42 vezes
&lt;p&gt;A tag &lt;strong&gt;canvas&lt;/strong&gt; foi introduzida no &lt;em&gt;html 5&lt;/em&gt; como uma das maiores novidades, introduzindo uma área onde podemos desenhar elementos específicos, formas geométricas e imagens através de &lt;em&gt;javascript&lt;/em&gt; substituindo em certos aspectos o uso do &lt;em&gt;flash&lt;/em&gt;.&lt;/p&gt; &lt;p&gt;Então vamos ao primeiro exemplo:&lt;/p&gt; &lt;pre&gt; <!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;body&amp;gt; &amp;lt;canvas id=&quot;canvas&quot; width=&quot;200&quot; height=&quot;100&quot; style=&quot;border:1px solid #000;&quot;&amp;gt; Se seu navegador não suportar HTML5 você verá esta mensagem. &amp;lt;/canvas&amp;gt; &amp;lt;/body&amp;gt; &amp;lt;/html&amp;gt; &lt;/pre&gt; &lt;h3&gt;Retângulo&lt;/h3&gt; &lt;p&gt;Para desenhar dentro da área de &lt;em&gt;canvas&lt;/em&gt; devemos primeiro pegar o elemento &lt;em&gt;canvas&lt;/em&gt; e pegar o contexto 2D.&lt;/p&gt; &lt;pre&gt; window.addEventListener('load',function(){ var elem = document.getElementById('canvas'); var context = elem.getContext('2d'); }); &lt;/pre&gt; &lt;p&gt;Na linha 1 adicionamos uma função para ser executada após a página ser totalmente carregada, que executará nosso código para desenhar na &lt;em&gt;canvas&lt;/em&gt;. Na linha 2 pegamos o elemento através do id que foi definido na tag e na linha 3 para pegar o contexto 2d, você deve estar se perguntando se existe um contexto 3d, no momento não pelo menos como padrão, mas exite algumas iniciativas como o &lt;em&gt;WebGL&lt;/em&gt;.&lt;/p&gt; &lt;p&gt;Para desenhar retângulos podemo sutilizar vários métodos e propriedades&lt;/p&gt; &lt;p&gt;&lt;strong&gt;fillRect(x , y , w , h ): &lt;/strong&gt; desenha um retângulo preenchido com a cor atribuída para o atributo &lt;em&gt;fillStyle&lt;/em&gt;(ex.: &lt;em&gt;context.fillStyle=&amp;#8217;#0000FF';&lt;/em&gt;). O retângulo será desenhado na posição &lt;strong&gt;x&lt;/strong&gt; e &lt;strong&gt;y&lt;/strong&gt; sendo esta o canto superior esquerdo e a partir deste ponto desenha para a direita a largura(w) e para baixo a altura(h).&lt;/p&gt; &lt;p&gt;&lt;strong&gt; context.strokeRect(x, y, w, h): &lt;/strong&gt; desenha um retângulo sem preenchimento e com uma borda. O tamanho e cor utilizados devem ser configurados através dos atributos &lt;em&gt;strokeStyle&lt;/em&gt;(ex.: &lt;em&gt;context.strokeStyle = &amp;#8216;#FF0000&amp;#8242;;&lt;/em&gt;) e &lt;strong&gt;lineWith&lt;/strong&gt;(ex.: &lt;em&gt;context.lineWidth = 5;&lt;/em&gt;)&lt;/p&gt; &lt;p&gt;&lt;strong&gt;context.clearRect (x, y, w, h): &lt;/strong&gt; limpa os pixels no retângulo especificado.&lt;/p&gt; &lt;div&gt; &lt;img src=&quot;http://www.botecodigital.info/wp-content/uploads/2014/12/retangulo.png&quot; height=&quot;245&quot; alt=&quot;retangulo&quot; width=&quot;400&quot; /&gt; &lt;/div&gt; &lt;pre&gt; context.fillStyle='#0000FF'; context.fillRect(10 , 10 , 100, 50); context.strokeStyle = '#FF0000'; context.lineWidth = 5; context.strokeRect(10, 100 , 100, 25); context.fillRect (10 , 200 , 100, 50); context.clearRect (30, 190, 50, 30); &lt;/pre&gt; &lt;p&gt;&lt;a href=&quot;http://botecodigital.info/exemplos/canvas/teste1.html&quot; target=&quot;_blank&quot;&gt;Veja o exemplo&lt;/a&gt;&lt;/p&gt; &lt;h3&gt;Caminhos&lt;/h3&gt; &lt;p&gt;Podemos desenhar retas no &lt;em&gt;canvas&lt;/em&gt; para isso utilizamos os métodos &lt;em&gt;moveTo(x,y)&lt;/em&gt; e &lt;em&gt;lineTo(x,y)&lt;/em&gt;. O método &lt;em&gt;moveTo&lt;/em&gt; serve para mover o &amp;#8220;lapís&amp;#8221; para a posição inicial da reta e será traçada uma reta até a posição utilizada para chamar o método&lt;em&gt;lineTo&lt;/em&gt;, se não foi chamado inicialmente o método &lt;em&gt;moveTo&lt;/em&gt; será utilizado a posição da ultima chamada de &lt;em&gt;lineTo&lt;/em&gt;. &lt;/p&gt; &lt;p&gt;Se você chamar somente os dois métodos não irá visualizar nada, porque as linhas só são efetivamente desenhadas no &lt;em&gt;canvas&lt;/em&gt; quando chamado o método &lt;em&gt;stroke()&lt;/em&gt;&lt;/p&gt; &lt;pre&gt; context.moveTo(10 , 10); context.lineTo(200 , 200); context.moveTo(50 , 10); context.lineTo(250 , 200); context.stroke(); &lt;/pre&gt; &lt;p&gt;&lt;a href=&quot;http://botecodigital.info/exemplos/canvas/teste2.html&quot; target=&quot;_blank&quot;&gt;Veja um exemplo&lt;/a&gt;&lt;/p&gt; &lt;h3&gt;Texto&lt;/h3&gt; &lt;p&gt;Textos podem ser adicionados a área de desenho com o método &lt;em&gt;fillText(texto , x , y )&lt;/em&gt;. Para configurar as características do texto como tamanho, tipo da fonte, negrito/itálico é feito através do da propriedade &lt;em&gt;font&lt;/em&gt; que aceita uma string com os valores separados por espaço.&lt;/p&gt; &lt;pre&gt; context.font = &quot;bold 24px Time New Roman&quot;; context.fillText(&quot;Boteco &quot;, 100, 150); context.fillText(&quot;Digital&quot;, 140, 180); &lt;/pre&gt; &lt;p&gt;O texto no &lt;em&gt;canvas&lt;/em&gt; não se comporta como o texto no &lt;i&gt;CSS&lt;/i&gt;, no caso a propriedade &lt;em&gt;textAlign&lt;/em&gt; que aceita os valores &lt;em&gt;left&lt;/em&gt;, &lt;em&gt;center&lt;/em&gt; e &lt;em&gt;right&lt;/em&gt; alinham o texto em relação ao ponto (x,y), no caso se colocarmos o alinhamento &amp;#8220;left&amp;#8221; o ponto informado para desenhar o texto ficará na esquerda do texto, ou seja, o texto começará no ponto. Se o alinhamento for &amp;#8220;right&amp;#8221; o final do texto será o ponto informado. &lt;/p&gt; &lt;pre&gt; context.textAlign = &quot;right&quot;; context.fillText(&quot;right&quot; ,200 ,350 ); &lt;/pre&gt; &lt;p&gt;Outra propriedade diferente é a &lt;em&gt;baseline&lt;/em&gt; que recebe os valores &lt;em&gt;bottom&lt;/em&gt;, &lt;em&gt;middle&lt;/em&gt; e &lt;em&gt;top&lt;/em&gt; que irá definir se o texto será plotado abaixo do ponto informado(&lt;em&gt;top&lt;/em&gt;), na mesma linha(&lt;em&gt;middle&lt;/em&gt;) ou abaixo(&lt;em&gt;top&lt;/em&gt;).&lt;/p&gt; &lt;pre&gt; context.textBaseline = &quot;bottom&quot;; context.fillText(&quot;bottom&quot; ,10 ,170 ); &lt;/pre&gt; &lt;p&gt;&lt;a href=&quot;http://botecodigital.info/exemplos/canvas/teste3.html&quot; target=&quot;_blank&quot;&gt;Veja o exemplo&lt;/a&gt;&lt;/p&gt; &lt;h3&gt;Imagens&lt;/h3&gt; &lt;p&gt;Para desenhar uma imagem no &lt;em&gt;canvas&lt;/em&gt; utilizamos o método &lt;em&gt;drawImage&lt;/em&gt; que pode ter 3 ,5 e 9 parâmetros.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;drawImage(image, dx, dy): &lt;/strong&gt; desenha na área de desenho a imagem passada por parâmetro a partir do ponto (dx , dy).&lt;/p&gt; &lt;p&gt;&lt;strong&gt;drawImage(image, dx, dy, dw, dh)&lt;/strong&gt; desenha a imagem passada e escala para a largura de dw e altura de dh.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh): &lt;/strong&gt;Pega a imagem passada por parâmetro e recorta a partir do ponto(sx,sy) até as dimensões(sw,sh) e desenha no &lt;em&gt;canvas&lt;/em&gt; no ponto(dx,dy) e escala para as dimensões(dw,dh).&lt;/p&gt; &lt;p&gt;A imagem que passamos por parâmetros para o método &lt;em&gt;drawImage&lt;/em&gt; pode ser um elemento &lt;em&gt;&amp;lt;img&amp;gt;&lt;/em&gt;,ou podemos criar um através de um construtor &lt;em&gt;new Image()&lt;/em&gt; e atribuir o endereço de uma imagem para o atributo &lt;em&gt;src&lt;/em&gt;.&lt;/p&gt; &lt;pre&gt; img = new Image(); img.src = &quot;img/hero_sprites01.png&quot;; context.drawImage( img , 30, 30); context.drawImage( img , 200, 30 , 60 , 60); context.drawImage( img , 0, 0 , 100 , 35 , 10, 200 , 100 , 35); &lt;/pre&gt; &lt;p&gt;&lt;a href=&quot;http://botecodigital.info/exemplos/canvas/teste4.html&quot; target=&quot;_blank&quot;&gt;Veja o exemplo&lt;/a&gt;&lt;/p&gt; &lt;h3&gt;Um exemplo de animação&lt;/h3&gt; &lt;pre&gt; var elem = null; var context = null; var img = Array(); window.addEventListener('load',function(){ elem = document.getElementById('canvas'); context = elem.getContext('2d'); for( i = 1 ; i &amp;lt; 8 ; i++){ img[i] = new Image(); img[i].src = &quot;img/hero_sprites0&quot;+i+&quot;.png&quot;; } x = 1 window.setInterval(function desenha(){ context.clearRect(30,30, 200,200); context.drawImage( img[x] , 30, 30); x++; if( x &amp;gt; 7 ){ x = 2; } console.log(x); }, 150); }); &lt;/pre&gt; &lt;p&gt;&lt;a href=&quot;http://botecodigital.info/exemplos/canvas/teste5.html&quot; target=&quot;_blank&quot;&gt;Veja o exemplo&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Da linha 9 até 12 criamos um array de imagem com cada uma das imagens que compõem a animação.&lt;/p&gt; &lt;p&gt;Na linha 14 é criado uma variável para controlar qual das imagens do array que esta sendo mostrado no momento.&lt;/p&gt; &lt;p&gt;Na linha 16 é chamado o método &lt;em&gt;setInterval&lt;/em&gt; que recebe dois parâmetros, sendo o primeiro uma função que será executada de tempos em tempos, o intervalo de tempo entre uma chamada e outra é definido no segundo parâmetro, no nosso caso 150, ou seja, nossa animação será desenhada aproximadamente 6 vezes por segundo.&lt;/p&gt; &lt;p&gt;Na linha 18,já dentro da função que será repetida para desenhara animação, chamamos o método &lt;em&gt;clearRect&lt;/em&gt; para limpar a área que estamos desenhando antes de desenhar a nova imagem. É necessário chamar este método pois a imagem de sprite que estamos utilizando tem fundo transparente.&lt;/p&gt; &lt;p&gt;Na linha 19 desenhamos a imagem corrente do array de imagens, na posição do &lt;em&gt;canvas&lt;/em&gt; que queremos. Na linha 21 incrementamos x para que na próxima execução do método seja desenhada uma imagem diferente e na linha 22 testamos para saber se o array já chegou ao fim, caso tenha chegado voltamos nossa variavel de contator x para o inicio.&lt;/p&gt; &lt;p&gt;Alguns devem estar se perguntando &amp;#8220;ok mas eu poderia fazer a mesma coisa com um gif&amp;#8221;, verdade, mas esse exemplo pode ser modificado para funcionar através do teclado, para o personagem correr somente quando uma tecla for pressionada através do evento de teclado &lt;em&gt;onkeypress&lt;/em&gt;, como em um jogo por exemplo.&lt;/p&gt; &lt;p&gt;Mas lembrando esta é somente o básico, já existe muitas bibliotecas de animação, que tornam a animação bem mais fácil.&lt;/p&gt; &lt;p&gt;Bem era isso T++&lt;/p&gt;
Fonte: http://www.botecodigital.info/web/a-tag-canvas-desenhando-com-javascript/

0sem comentários ainda

Enviar um comentário

Os campos são obrigatórios.

Se você é um usuário registrado, pode se identificar e ser reconhecido automaticamente.

 Cancelar