时间戳

首页 > 解决方案 > Javascript Image 对象未绘制到 2D 画布

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

问题描述

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


这是错误：

Neutrino.js：44 未捕获的类型错误：无法在“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”也在当前的网络目录中。

标签： javascripthtmlimage

解决方案

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

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

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

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

推荐阅读