キャンバス画像のトラブル

Question

特にFirefoxでは、JavaScriptとCanvasに問題があります。キャンバスが標準のimgタグの代わりにブラウザで有効になったときに実行されるキャンバスイメージビューアを作成しようとしています。矢印がクリックされると、Javascriptは画像をsrcパスの配列から変更します。何らかの理由でFirefoxは常に1つのimgの同期が外れています。私がクロムでテストすると、imgsは同期しますが、最初のものは表示されません。ここ

は矢印が押されたときに、このような関数が呼び出された私の最初のキャンバス使う初期

if(canvas()){ //canvas stuff 
var myc = document.createElement('canvas'); 
myc.id='mycanvasx'; 
mycanvas = document.getElementById('mycanvasx'); 
myc.width = image.width; 
myc.height = image.height; 
//viewer.replaceChild(myc, scroller); 
viewer.appendChild(myc); 
var context = myc.getContext("2d"); 
dw = image.width; 
dh = image.height; 

context.clearRect(0, 0, myc.width, myc.height); 
context.drawImage(image, 0, 0, dw, dh); 

} 

され、画像オブジェクトここ

var image = new Image(); 
image.src = myImage.src[0]; 

ある

function update(){ 
if(canvas()){ 
context.clearRect(0,0,myc.width, myc.height) //maybe bloat 
myc.width = image.width; 
myc.height = image.height; 
dw = image.width; 
dh = image.height; 

context.drawImage(image, 0, 0, dw, dh); 

} 
} 

function left(){ //these move the image through the source array 
if(myImage.num > 0){myImage.num--;}else{ 
myImage.num = (myImage.src.length-1)} 
image.src = myImage.src[myImage.num]; 
scroller.src = image.src; 
update(); 

x=0; 
} 

私が知っています私はここで簡単な何かを欠いているに違いない。私はfirefox 4.0.1とchrome 11を使用しています。

Answer 1

イメージのsrcを設定してすぐにキャンバスにペイントしています。しかし、イメージのロードは非同期です。つまり、あなたが設定した新しいsrcがロードされる前に描画しています。同じイメージを再利用し続けるので、その時点で以前のイメージを表示しています。

オンロードリスナーからupdate()を実行して、imageに実行します。