在画布中创建自定义图像对象

Question

我正在尝试创建一个对象，该对象将创建一个图像并将其绘制在画布上。我不仅仅是常规图像对象的原因是我想知道对象在画布上的位置以进行鼠标操作。

这是我的构造函数：

function DisplayImg(src, x, y, w, h) {
            this.src = src;
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
        }

我创建了一个绘制函数来将它绘制到画布上：

DisplayImg.prototype.draw = function(context) {
            img = new Image();
            img.src = this.src;
            img.onload = function() {
            context.drawImage(img,this.x,this.y,this.w,this.h); 
            }
        }

然后我对 instagram 进行 API 调用并获取一些照片 url 并将它们放入一个数组中。在这里，我试图遍历该数组并为每个数组创建一个对象，并将其绘制到画布上。我可以 console.log 数据并查看图像 src，所以我知道数据在那里。这是我在获取数据后调用的函数：

function draw() {  
          for (var i = 0; i < srcArr.length; i++) { 
            var src = srcArr[i];
            x = Math.floor(Math.random()*8);
            y = Math.floor(Math.random()*8);
            var theImage = new DisplayImg(src,x,y,75,75); 
            theImage.draw(context);
          } 
        }

我的日志返回正确的数据，但没有图像被绘制到画布上。非常感谢任何帮助。

Answer 1

你应该做的第一件事是修复你的原型函数：

DisplayImg.prototype.draw = function(context) {
    var display = this,
        img = new Image();
    img.onload = function() {
        context.drawImage(img,display.x,display.y,display.w,display.h); 
    }
    img.src = this.src;
}

您将垃圾值传递给 context.drawImage 函数，因为“this”不再适用于该 onload 函数内的 DisplayImage 实例，这应该可以解决这个问题。

其次，请确保您实际上传递了正确的上下文，我对此无能为力。我做了一个小提琴来举例说明你的代码，但我不得不改变你的“绘图”功能以使其理智：http://jsfiddle.net/yuaHF/2/