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调用并获取一些照片网址并将它们放入数组中。在这里，我试图遍历该数组并为每个数组创建一个对象，并将其绘制到画布上。我可以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/

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

1 个答案: