首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript图像对象不绘制到2D画布

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

Stack Overflow用户
提问于 2018-07-28 04:56:38
回答 1查看 387关注 0票数 1

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

下面是错误:

Neutrino.js:44未捕获TypeError:未能对“CanvasRenderingContext2D”执行“”drawImage“”:提供的值不是Image.Sprite.img.onload处的类型“”(CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas)“”

下面是我的代码:

代码语言:javascript
复制
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目录中。

EN

回答 1

Stack Overflow用户

发布于 2018-07-28 09:34:32

onload回调使用this关键字,该关键字与外部作用域(How does the "this" keyword work?)中的this不是同一个对象。您应该通过复制外部this并在回调中使用该副本来解决此问题:

代码语言:javascript
复制
var _this = this;
this.img.onload = function() {
    ctx.drawImage(_this.img, _this.x, _this.y);   
};

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

代码语言:javascript
复制
this.img.onload = () => ctx.drawImage(this.img, this.x, this.y);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51565450

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档