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

draw image from canvas constructor prototype

本文关键字：绘制 图像 原型 构造函数      更新时间：2023-09-26

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

似乎我甚至无法开始使用原型功能加载图像。控制台日志显示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示例

我已经修复了一些问题。

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

演示

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

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

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

相关文章：