画布闪烁，img.src 访问

Question

我有一个图片掉落的游戏 我将下一个函数 push() 到一个数组中，我的照片var bulletin在闪烁，所以我想这可能是我在使用 update() 函数时画了很多

function rect () {

    this.size = [rectSize.x, rectSize.y];

    this.imagesSrc = rand(0, 1) ? 'bulletinYes' : 'bulletinNo';

    this.position = [rand(0, w-rectSize.x), -rectSize.y];

    this.bulletinValue = (this.imagesSrc === 'bulletinYes') ? 'bulletinYesValue' : 'bulletinNoValue';

}

rect.prototype = {

    draw: function (){ 

        var bulletin = new Image();

        bulletin.src = imagesSrc[this.imagesSrc];

        ctx.drawImage(bulletin, this.position[0], this.position[2], this.size[0], this.size[2]);

    }

}

我试过var bulletin像这样把功能放在外面

var bulletin = new Image();

bulletin.src = imagesSrc[this.imagesSrc];   <= ???

function rect () {

    this.size = [rectSize.x, rectSize.y];

    this.imagesSrc = rand(0, 1) ? 'bulletinYes' : 'bulletinNo';

    this.position = [rand(0, w-rectSize.x), -rectSize.y];

    this.bulletinValue = (this.imagesSrc === 'bulletinYes') ? 'bulletinYesValue' : 'bulletinNoValue';

}

rect.prototype = {

    draw: function (){ 

        ctx.drawImage(bulletin, this.position[0], this.position[1], this.size[0], this.size[1]);

    }

}

但我不知道如何改变 [this..imagesSrc] 它才能工作。而且它只执行一次，并且图片不会为每个推送的图片随机化。有没有人有任何建议如何摆脱闪烁或改变bulletin.src = imagesSrc[this.imagesSrc];

如果你想查看整个脚本，这是我的 github 链接

我刚刚开始我的编码路径，所以感谢任何可以回答这个问题的人:)

Answer 1

您每次都创建新图像并尝试在加载图像之前绘制它。更好的方法是在开始时准备所有图像并绘制它。您的代码稍作改动，一切都会起作用：准备图片：var imagesSrc = {&nbsp; &nbsp; ballotBoxImgSrc: 'img/ballotBox.png',&nbsp; &nbsp; bulletinYes: 'img/yes.jpg',&nbsp; &nbsp; bulletinNo: 'img/no.jpg'};var images = {&nbsp; &nbsp; ballotBoxImgSrc: new Image(),&nbsp; &nbsp; bulletinYes: new Image(),&nbsp; &nbsp; bulletinNo: new Image()}for(let [name,value] of Object.entries(imagesSrc)) {&nbsp; &nbsp; images[name].src = value;}画：rect.prototype = {&nbsp; &nbsp; draw: function (){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var bulletin = images[this.imagesSrc];&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(bulletin, this.position[0], this.position[1], this.size[0], this.size[1]);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }}