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

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

我再进行API调用的Instagram和抓住一些照片的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功能，因为“这个”不再适用于您的DisplayImage实例的onload函数内，这应该补救。其次，确保你确实传递了一个正确的上下文，并没有太多可以帮助你。我做了一个小例子你的代码，但我不得不改变你的“绘制”功能，使其理智：http://jsfiddle.net/yuaHF/2/