Portuguese, Brazilian subtitles

← PS 03-05 Carregando imagens

Get Embed Code
8 Languages

Subtitles translated from Portuguese Showing Revision 2 created 09/01/2013 by Liliane Tambasco.

  1. A maior parte da interação no canvas usado por
    GRITS é através da rendição de imagens
  2. ao canvas. Para desenhar uma imagem no canvas,
    primeiro temos que carregá-la.
  3. Para carregar uma imagem, precisamos criar
    um novo objeto de imagem,
  4. que em JavaScript é composto de três etapas.
    Na primeira se deve estabelecer um novo
  5. objeto de imagem. Na segunda definir sua função 'onload'. Em seguida, na terceira etapa,
  6. precisamos definir o atributo da fonte da imagem.
    Vale a pena notar que se a
  7. propriedade da fonte da imagem for definida
    por meio de um valor, JavaScript começará a
  8. função 'onload'. Por isso, é preciso primeiro
    especificar a função "callback"
  9. antes de definir o atributo da fonte. Caso contrário, a imagem carregará os dados, mas
  10. não teremos o retorno do callback.
  11. Agora vamos dar uma olhada neste código. Aqui está a url da imagem que gostaríamos que você
  12. carregasse. Queremos que você crie um novo
    objeto de imagem, seguindo os
  13. passos que acabamos de mencionar, e defina a função onload e propriedades da fonte para
  14. esta imagem descrita no código. Certifique-se de
    que a função onload está
  15. anexada nesta onImageLoad aqui em baixo,
    a qual enviará mensagens
  16. ao log do console, avisando que
    tudo foi carregado corretamente.
  17. Se você ficar confuso sem saber se sua imagem está carregando ou não,
  18. não se esqueça de verificar nas ferramentas de desenvolvedor do Chrome, nas tablas de rede, que indica
  19. se a imagem foi carregada, e quanto tempo
    levou o processo.