Javascript：我无法在画布上绘制图像

Question

I already create my canvas on my page, however when I try to import an image on the canvas, it does not appear, here are the code I used. (the makeGameArea is a method I created to make a canvas on the webpage, the code of this method is not shown because it is so long to put it here)

Here are the following code that should have problem

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); 
         }
     }           

}

Is there anything wrong with my drawImage() method?

Answer 1

HTMLImage. onload will fire only once per src setting.

Here you are attaching your handler in the draw method, which I guess will be called later on. At this moment, the event will already have fired, and hence will never be called, since it won't fire again _{unless you reset its src} .

Fixed code block:

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;
     }