画布闪烁，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 = {

    ballotBoxImgSrc: 'img/ballotBox.png',

    bulletinYes: 'img/yes.jpg',

    bulletinNo: 'img/no.jpg'

};

var images = {

    ballotBoxImgSrc: new Image(),

    bulletinYes: new Image(),

    bulletinNo: new Image()

}

for(let [name,value] of Object.entries(imagesSrc)) {

    images[name].src = value;

}

画：

rect.prototype = {

    draw: function (){ 

        var bulletin = images[this.imagesSrc];

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

    }

}