Question

我试图预先加载一组图像，然后使用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);
};

这里是FIDDLE示例

Answer 1

尝试在canvas函数中移动setImages函数，如下所示：

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

在第13行中，您应该在画布对象上调用setImages：canvas1.setImages（）;

Answer 2

我已经解决了一些问题。

首先，我已将创建两个对象的代码移动到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();
});

Demo

从canvas构造函数原型中绘制图像

2 个答案: