canvas drawImage não desenha imagens pela primeira vez
Estou trabalhando em um jogo simples de JavaScript usando a tela HTML5. É uma configuração de loop de jogo muito típica, envolvendo:
Função init () que inicializa objetos a serem usados no campo de jogo, randomizando algumas posições x / y iniciais e tarefas de configuração semelhantesfunção draw () que desenha todos os objetos do jogo, incluindo algumas formas simples de tela e algumas imagenssetInterval para chamar desenhar a cada 25 milissegundosAo iniciar esse projeto, eu tive a chamada setInterval no final da função init (), então ele começava a desenhar e animar assim que você carregava a página, e tudo funcionava bem. Agora que estou mais adiantado, gostaria de desenhar um campo de jogo estático e totalmente preenchido em carga e depois usar um botão para iniciar o intervalo do loop do jogo principal. Então, adicionei uma única chamada para draw () no final do init (), e o problema é que, quando faço isso, todas as formas da tela são desenhadas corretamente, mas nenhuma das imagens é renderizada na tela.
ElesFaz renderize se eu deixar o draw () rodar algumas vezes, como ...
var previewDraw = setInterval(draw, 25);
var stopPreviewDraw = function() { clearInterval(previewDraw) }
setTimeout(stopPreviewDraw, 100)
... mas isso parece idiota. Por que uma única chamada para draw () não funciona? Registrei os objetos nos consoles do Chrome e Firefox e tudo parece bem; eles já têm os caminhos img src apropriados e iniciam os valores x / y disponíveis para serem atribuídos à nova Image () que é criada e depois chamada pelo meu método canvas.2dcontext.drawImage ().
Estou testando isso no Chrome 6 e no Firefox 3.6.10, enquanto ambos estão me intrigando com esse comportamento. Nenhum erro ou problema é exibido no console do Chrome, mas se eu tentar chamar draw () apenas quando o Firefox lançar isso:
exceção não capturada: [Exceção ... "O componente retornou o código de falha: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" local: "quadro JS:http: // localhost / my-game-url / :: drawItem :: line 317 "dados: não]
Minhas pesquisas no Google por esse erro sugerem uma imagem corrompida, mas todas elas abrem no Preview e no Photoshop sem problemas.