Javascript图像对象未绘制到2D画布

Question

我正在制作一个非常简单的游戏引擎，我正在开发一个函数来制作精灵并将其绘制到画布上，但它似乎无法绘制。图像加载并显示在铬源中，但不想绘制。


以下是错误：

Neutrino.js:44 Uncaught TypeError:未能在"CanvasRenderingContext2D"上执行"drawImage"：提供的值的类型不是"(CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCnvas("在Image.Sprite.img.onload

这是我的代码：

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var c = canvas.getContext("2d");
var Sprite = function(src,x,y,w,h,ctx) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.src = src;
this.img = new Image(this.w,this.h);
this.img.onload = function() {
ctx.drawImage(this.img,this.x,this.y);   
};
this.img.src = this.src;
return this;    
}
var puppy = new Sprite("puppy.jpg",100,100,100,100,c);

"小狗.jpg"也在当前的网络目录中。

Answer 1

您的onload回调使用this关键字，该关键字与外部范围中的this不是同一对象("this"关键字是如何工作的？(。您应该通过制作外部this的副本并在回调中使用该副本来解决问题：

var _this = this;
this.img.onload = function() {
ctx.drawImage(_this.img, _this.x, _this.y);   
};

或者，您可以用lambda替换回调函数，lambda对this关键字的处理方式不同。我应该记住，目前只有现代浏览器支持Lambda(https://caniuse.com/#feat=arrow-函数(，因此上面的第一个解决方案可能是更好的解决方案，这取决于您想要接触的受众。这是lambda版本：

this.img.onload = () => ctx.drawImage(this.img, this.x, this.y);