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

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

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

标签： javascriptcanvas

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>