Javascript HTML5/JS画布显示图片

我在画布上显示图片时遇到问题，尤其是在使用Chrome时

我有一个方法被调用来绘制肖像（名称、img、边框），但是

context.drawImage（）

在Chrome中似乎不起作用。有什么解决办法吗

Portrait.prototype.draw = function (context, x, y, tX, tY) {
    context.save();
    context.translate( tX, tY );        
    context.fillStyle = 'blue';
    context.strokeStyle = 'black';
    context.strokeRect(x, y, 160, 200);
    context.fillRect(x, y, 160, 200);
    context.stroke(); 
    // adding the image
    context.beginPath();          
    var img = new Image();
    var link = this.getImageUrl();
    img.src = link; 
    //context.drawImage(img,x+5,y+5);  //works mozzila      
    img.onload = function () { context.drawImage(img,x+5,y+5); }  
    // partial work chrome but on refresh displays e.g two different portrait images in turn in a random portrait (if multiple portraits on canvas)          
    // text box
    context.beginPath();
    context.fillStyle = '#ffffff';
    context.fillRect(x+5,y + 165,150,30);
    // text
    context.beginPath();
    context.fillStyle = 'black';
    var n = this.getName();
    context.font = "25px Aerial";
    context.fillText(n,x+5,y+190); // should give the name      
    context.restore();
};

---

您正在传递

img.onload

一个异步执行的函数，这意味着其他代码行将在完成之前继续执行。在image.onload函数中包装整个“绘图”

Portrait.prototype.draw = function (context, x, y, tX, tY) {
    var img = new Image();
    var link = this.getImageUrl();
    img.src = link; 

    img.onload = function () {
        context.save();
        context.translate( tX, tY );        
        context.fillStyle = 'blue';
        context.strokeStyle = 'black';
        context.strokeRect(x, y, 160, 200);
        context.fillRect(x, y, 160, 200);
        context.stroke();
        context.drawImage(img,x+5,y+5);
        //...

    }
};

---

getImageURL（）可以工作，它是一个返回对象正确url的方法。先生，您是一个救生员！我认为它可能是异步的，但我不知道如何修复它。谢谢。哦，顺便说一句，我必须删除var n=this.getName（）；因为它不能引用正确的对象，所以您可以保留它，只需添加

var self=this

作为draw函数的第一行，并改为写入

var n=self.getName（）

！