Javascript 未在画布上随机渲染的图像

错误的图像仅出现在一个位置，即x=0，y=0

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
var bugSmashed = 0;

//rendering background image
function renderImage()
{
    var backImage = new Image();
    backImage.src = "jungle.jpg"
    backImage.onload = function(){
        c.drawImage(backImage,0,0,canvas.width,canvas.height)}
}
renderImage();

//Making a bug
class Bug {
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    renderBug(){
        var bugImage = new Image();
        bugImage.src = "bug.png";
        bugImage.onload = function(){
            c.drawImage(bugImage,this.x,this.y,65,65)}}
}

试图使错误随机出现在画布上

var interval = setInterval(function(){
        var x = 32+Math.random()*(canvas.width-64);
        var y = 32+Math.random()*(canvas.height-64);
        var aBug = new Bug(x,y);
        aBug.renderBug();}, 2000);

---

我肯定我错过了什么。感谢您的帮助。谢谢

我发现了你的问题：

这个

改变了它在

函数中的含义。因此，当您使用：

function(){c.drawImage(bugImage,this.x,this.y,65,65)}

此
不再指
aBug
！（它将引用全局
窗口
对象。）您可以改用胖箭头语法（它保留了
此
）：

我不鼓励您使用的另一种非常丑陋的方法是，创建一个对
this
的新引用，然后在函数中使用该引用：

let that = this;
function(){ c.drawImage(bugImage, that.x, that.y, 65, 65); };

或者，您可以简化代码，使其覆盖
onload
逻辑，从而避免将
c.drawImage
首先包装到函数中（请注意，出现的方块是一个可公开寻址的图像）：
var canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var c=canvas.getContext（'2d'）；
//制造臭虫
让bugImg=newimage（）；
bugImg.src=”https://th.bing.com/th/id/OIP.pXD0MAw4LeAcVrt3qRiEfwAAAA?pid=ImgDet&rs=1";
类错误{
构造函数（x，y）{
这个.x=x；
这个。y=y；
}
renderBug（）{
c、 drawImage（bugImg，this.x，this.y，65,65）；
}
}
var interval=setInterval（函数（）{
var x=32+Math.random（）*（canvas.width-64）；
var y=32+Math.random（）*（canvas.height-64）；
var aBug=新错误（x，y）；
aBug.renderBug（）；
}, 500);
我建议您在执行
c.drawImage（…）
之前先执行
console.log（this.x，this.y）
。我怀疑
this.x
和/或
this.y
是
NaN
，这将导致它们在画布绘制操作中用作值时解析为0。当我调用
console.log（this.x，this.y）
bugImage之前调用
console.log（this.x，this.y）
时，onload（..）
x和y有值，但当我调用
console.log（this.x，this.y）时
在
bugImage.onload（…）
之前的
c.drawImage（…）
中，它们是0,0。我不确定为什么会发生这种情况。
let that = this;
function(){ c.drawImage(bugImage, that.x, that.y, 65, 65); };