從畫布構造器原型中繪制圖像

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

嘗試像這樣在畫布函數內部移動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();
});

演示版