Question

虫子的图像只出现在一个地方，即 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)}}
}

试图让 bug 随机出现在画布上

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

我确定我遗漏了一些东西。任何帮助表示赞赏。谢谢

Answer 1

我发现了您的问题：this 在 function 中改变了它的含义。所以当你使用：

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

this 不再指 aBug！（它会改为引用全局 Window 对象。）您可以改用粗箭头语法（保留 this）：

() => c.drawImage(bugImage,this.x,this.y,65,65)

我不鼓励您使用的另一种非常丑陋的方法是创建对 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');

//Making a bug
let bugImg = new Image();
bugImg.src = "https://th.bing.com/th/id/OIP.pXD0MAw4LeAcVrt3qRiEfwAAAA?pid=ImgDet&rs=1";
class Bug {
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    renderBug(){
        c.drawImage(bugImg, 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();
}, 500);

<canvas id="canvas" width="100" height="100"></canvas>

图像不会在画布上随机渲染

1 个答案: