canvas使用drawImage函数画出的图片有时不显示问题

        这次在工作中用到了canvas来画抽奖的转盘，其中奖品的图片就是用canvas.drawImage()来画的，但是网页打开后，图片有时候能显示，有时候刷新完就不显示了。而且要循环画图，网页也只偶尔显示第一张图。找了半天问题也没有头绪。

原先的代码如下

if(this.data.prize[index].pic){
    var imgUrl = new Image();
    imgUrl.src=this.data.prize[index].pic
    this.ctx.drawImage(imgUrl,-9,110,18,18)
}

        看了很多博客说是虽然有了imgUrl 对象，但是图片的加载也是需要时间的，使用drawImage时图片未加载出来，这个函数就调用不了，推荐onload函数。但是我试了很多方法，无论是window.onload还是imgUrl.onload都不行。

        后面我想到可以使用async await来解决。因为创建图片对象要比画图快得多，创建好多个对象后for循环中的图片也没绘制好。async await就解决了这个问题。我首先用一个数组先保存好创建的图片对象，然后await 来画图，这样图片对象就能先创建好而不同等待画图的时间。具体看代码。

for(let i in this.data.prize){
    if(this.data.prize[i].pic){
	    let imgUrl = new Image();
	    imgUrl.src=this.data.prize[i].pic
	    this.imgList.push(imgUrl)	
	}else{
	    this.imgList.push('')
	}
}

if(this.imgList[index] != ''){
	await this.ctx.drawImage(this.imgList[index],-9,110,18,18)
}

这样再循环画图就正常了。