Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

vi a resposta e nao consegui fazer msm assim!

não consegui

8 respostas

Oi, Augusto

Que problema você encontrou? Por que não conseguiu?

nao consigo fazer a "imagem" passar correndo pela tela pois nao estou conseguindo por ela na tela

Augusto, tente abrir o console do navegador apertando a tecla F12 e veja se aparece alguma mensagem de erro lá.

ja apaguei tudo agora =/

ja apaguei tudo agora =/

Tenta isso:

<canvas id="tela" width="600" height="400"></canvas>
<script>
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    var imagem = new Image();
    imagem.src = "http://www.urldaimagem.com"; //Substituir por alguma url de alguma imagem na internet

    var x = 1;

    var desenhaImagem = function(x, y)
    {
        c.drawImage(imagem, x, y);
    };

    var limpaTela = function()
    {
        c.clearRect(0, 0, 600, 400);
    };

    var desenha = function()
    {
        limpaTela();
        desenhaImagem(x, 100);
        x = x + 1;
    };

    setInterval(desenha, 30);

</script>

Eu também não consegui! Nem mesmo colando esse código deu certo : / Colando o código o JS console diz: "Failed to load resource: net::ERR_NAME_NOT_RESOLVED 462animacao8.html:10 Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state. 431animacao8.html:10 Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state." Teve uma tentativa que o JSconsole do crome não parava de contar erros, deu mais de mil!!

solução!

Fabio,

A resposta não está mastigada. O código que postei tem que ser adaptado à sua necessidade para funcionar. Provavelmente, um dos erros foi que você esqueceu de substituir um detalhe na linha abaixo:

  imagem.src = "http://www.urldaimagem.com"; //Substituir por alguma url de alguma imagem na internet

Note que você precisa colocar uma URL que aponte para uma imagem. Isso quer dizer que a URL que está ali não funciona e precisa ser substituída por uma que funcione.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software