Javascript：キャンバスに画像を描くことができません

Question

キャンバスに画像をインポートしようとすると、私のキャンバスは既に作成されていますが、表示されません。ここで

が問題

を持っている必要があり、次のコードです（makeGameAreaは、ここにそれを置くためにとても長いので、このメソッドのコードが示されていない、私はWebページ上のキャンバスを作るために作成する方法です）

var myGameArea2 = makeGameArea(700, 150, "myArea", "white"); 
var myContext2 = myGameArea2.getContext("2d"); 

var myImage = new drawImage(myContext2, "sonic.gif", 91, 97, 0, 0); 
myImage.draw(); 

function drawImage(ctx, src, width, height, x, y){ 
    this.image = new Image(); 
    this.image.src = src; 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y; 
    this.draw = function(){ 
     this.image.onload = function(){     
      ctx.drawImage(this.image, this.x, this.y, this.width, this.height); 
     } 
    }   

drawImage（）メソッドに問題はありますか？

Answer 1

HTMLImage。 onloadは、srcの設定ごとに1回だけ発生します。

ここでは、drawメソッドでハンドラをアタッチしています。後で呼び出すと思います。現在のところ、このイベントは既に起動されているため、srcをリセットしない限り、再度起動しないので、_{は呼び出されません。}

固定コードブロック： `makeGameArea`が定義されて

function drawImage(ctx, src, width, height, x, y){ 
    this.image = new Image(); 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y; 
    this.draw = function(){ 
     ctx.drawImage(this.image, this.x, this.y, this.width, this.height)); 
     }; 
    // if you want it to draw as soon as possible 
    this.image.onload = this.draw.bind(this); 
    this.image.src = src; 
    }