Javascript 从画布构造器原型绘制图像

我正在尝试预加载一组图像，并使用canvas构造函数将列表中的第一个图像绘制到多个画布上

似乎我甚至不能开始使用原型函数加载图像。控制台日志显示this.setImages不是一个函数。我只是从js开始，所以这可能是一个非常简单的错误

我在代码中留下了一些注释，我希望它能让代码更清晰

还有其他方法来实现我的要求，但在我的情况下，我必须使用构造函数

var sources = [
'http://i.telegraph.co.uk/multimedia/archive/02830/cat_2830677b.jpg',
'http://r.ddmcdn.com/w_622/u_0/gif/05-kitten-cuteness-1.jpg',
'http://simplycatbreeds.org/images/Kitten.jpg'];

var images = [];


var canvas1 = new canvas('canvas1');
var canvas2 = new canvas('canvas2');

// load images using callback function
setImages(sources, function(images){
    window.alert("Done loading... Start!");
    this.draw();
});

// canvases constructor
function canvas(canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.context = this.canvas.getContext('2d');

    this.canvas.style.width = '100%';
    this.canvas.style.height = '100%';

    this.canvasId = canvasId;

    this.setImages();
};

// preloading images
canvas.prototype.setImages = function(sources, callback){
    var cnt = 0;

    function imagesLoaded(){ 
        cnt++;

        if (cnt >= sources.length){
            // passing the objet containing images to load as parameteres 
            callback(images);      
        }
    }

    for (var i=0; i<sources.length; i++) {
        images[i] = new Image();
        images[i].src = sources[i];

        images[i].onload = function(){
            imagesLoaded();
       }
    }
};

canvas.prototype.draw = function() {

    // some code to manipulate image to be added here...

    this.context.drawImage(images[1], 0, 0);
};

var源=[
'http://i.telegraph.co.uk/multimedia/archive/02830/cat_2830677b.jpg',
'http://r.ddmcdn.com/w_622/u_0/gif/05-kitten-cuteness-1.jpg',
'http://simplycatbreeds.org/images/Kitten.jpg'];
var图像=[]；
var canvas1=新画布（“canvas1”）；
var canvas2=新画布（“canvas2”）；
//使用回调函数加载图像
设置图像（源、函数（图像）{
window.alert（“完成加载…开始！”）；
这个.draw（）；
});
//拉票
函数画布（canvasId）{
this.canvas=document.getElementById（canvasId）；
this.context=this.canvas.getContext（'2d'）；
this.canvas.style.width='100%'；
this.canvas.style.height='100%'；
this.canvasId=canvasId；
这是setImages（）；
};
//预加载图像
canvas.prototype.setImages=函数（源、回调）{
var-cnt=0；
函数imagesLoaded（）{
cnt++；
如果（cnt>=sources.length）{
//传递包含要作为参数加载的图像的objet
回调（图像）；
}
}
对于（var i=0；i请尝试在画布函数中移动setImages函数，如下所示：

function canvas(canvasId)
{
   this.setImages = function(...){ };
   ...
   this.setImages();
}

在第13行中，您应该在画布对象上调用setImages:canvas1.setImages（）；
我已经解决了一些问题

首先，我将创建这两个对象的代码移到了JS的末尾。原因是在尝试访问原型函数之前必须先加载它们。我建议使用事件侦听器，例如
window.onload
，以防止在加载所有对象之前启动代码

其次，我更改了
setImage
，因此在
canvas
对象上调用它

var sources = [...];
var images = [];


// load images using callback function

// canvases constructor
function canvas(canvasId) {
   this.canvas = document.getElementById(canvasId);
   this.context = this.canvas.getContext('2d');

   this.canvas.style.width = '100%';
   this.canvas.style.height = '100%';

   this.canvasId = canvasId;

   //I removed this since it does not have the right params
   //this.setImages();

};

// preloading images
canvas.prototype.setImages = function(sources, callback){
   var cnt = 0;
   var obj = this;

   function imagesLoaded(){ 
      cnt++;

      if (cnt >= sources.length){
         // passing the objet containing images to load as parameteres 
         callback(images, obj);      
      }
   }

   for (var i=0; i<sources.length; i++) {
      images[i] = new Image();
      images[i].src = sources[i];

      images[i].onload = function(){
         imagesLoaded();
      }
   }
};

canvas.prototype.draw = function() {

   // some code to manipulate image to be added here...
   this.context.drawImage(images[1], 0, 0);
};

var canvas1 = new canvas('canvas1');
canvas1.setImages(sources, function(images){
   window.alert("Done loading... Start!");
   this.draw();
});

var canvas2 = new canvas('canvas2');
canvas2.setImages(sources, function(images, obj){
   window.alert("Done loading... Start!");
   obj.draw();
});

var源=[…]；
var图像=[]；
//使用回调函数加载图像
//拉票
函数画布（canvasId）{
this.canvas=document.getElementById（canvasId）；
this.context=this.canvas.getContext（'2d'）；
this.canvas.style.width='100%'；
this.canvas.style.height='100%'；
this.canvasId=canvasId；
//我删除了它，因为它没有正确的参数
//这是setImages（）；
};
//预加载图像
canvas.prototype.setImages=函数（源、回调）{
var-cnt=0；
var obj=这个；
函数imagesLoaded（）{
cnt++；
如果（cnt>=sources.length）{
//传递包含要作为参数加载的图像的objet
回调（图像，obj）；
}
}
对于（var i=0；这是否解决了您的问题？