gpt4 book ai didi

javascript - Javascript 对象数组中的 Canvas 图像类型

转载 作者:行者123 更新时间:2023-11-30 12:04:20 24 4
gpt4 key购买 nike

下午好,我的代码需要一些帮助,我正在尝试用用户可以点击的 Hearts 在 Canvas 中编写 map ,但我想将这些心形存入数组以使用 for 循环显示它们。

我的代码在这里:

var canvas = document.getElementById("mapC");
var ctx = canvas.getContext("2d");

var Heart = function(link, posX, posY) {
this.link = link;
this.posX = posX;
this.posY = posY;
this.pic = new Image();
this.pic.addEventListener("load", function() {
ctx.drawImage(this.pic, this.posX, this.posY);
}, false);
this.pic.src = "heart.png";

}
Heart.prototype.heartClick = function()
{
document.location.href= this.link;
}

var heartsArray = new Array();
heartsArray.push(new Heart("this", 40, 40));

问题是

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

但是我的“this.pic”图片是数组中可显示的类型,我没有发现错误,请帮助我。

最佳答案

在您的回调函数中,this 指向全局对象window。您应该将 this 的引用保存到新变量中,然后您就可以使用它了。

var self = this;
this.pic.addEventListener("load", function() {
ctx.drawImage(self.pic, self.posX, self.posY);
}, false);

关于javascript - Javascript 对象数组中的 Canvas 图像类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35653926/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com