Javascript Image对象未绘制到2D画布

Question

我正在制作一个非常简单的游戏引擎，并且正在研究制作精灵并将其绘制到画布上的功能，但似乎无法绘制。 图像会加载，并显示在chrome源中，但不想绘制。


这是错误：

Neutrino.js：44未捕获的TypeError：无法在“ CanvasRenderingContext2D”上执行“ drawImage”：提供的值不是Image.Sprite.img上的类型（（CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）。负载

这是我的代码：

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);

“ puppy.jpg”也位于当前的Web目录中。

Answer 1

您的onload回调使用this关键字， this关键字与外部范围中的this是不同的对象（ “ this”关键字如何工作？ ）。 您应该通过复制外部this并使用回调内部的副本来解决此问题：

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

或者，您也可以用lambda替换回调函数，该lambda会对this关键字进行不同的处理。 我应该记住，目前只有现代浏览器支持lambdas（ https://caniuse.com/#feat=arrow-functions ），因此上述第一个解决方案可能会根据您想要覆盖的受众群体提供更好的解决方案。 这是lambda版本：

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