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

Create custom image object in canvas

本文关键字：图像 对象 自定义 创建 布中      更新时间：2023-09-26

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

这是我的构造函数：

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

我的日志返回正确的数据，但没有图像绘制到画布上。任何帮助将不胜感激。

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

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 实例，这应该可以解决这个问题。

其次，确保你实际上传递了一个正确的上下文，我能帮助你的不多。我做了一个小提琴来举例说明你的代码，但我不得不改变你的"draw"函数以使其理智：http://jsfiddle.net/yuaHF/2/

相关文章：