微信小程序canvas画布如何解决在for循环绘制图像显示不全的问题

如下所示，在for循环中绘制图像，由于onload函数加载图像是异步执行，会导致显示不全所有图片的问题。

  for(var a=0;a<2;++a){       
    var img = canvas.createImage()
    img.src = product_image[items[a]]
    img.onload = ()=>{
      ctx.drawImage(el,0,h,image_w,image_h)
    }                
  }

可以将异步执行过程通过promise变为同步执行，但此方法相对复杂。

可以在第一个for循环中保存img对象，然后单独增加一个for循环加载图片，如下所示：

  var image = []
  for(var a=0;a<2;++a){       
    var img = canvas.createImage()
    img.src = product_image[items[a]]
    image[a] = img               
  }
  image.forEach(function(el,index){
	var h = index*pr_height+pr_h_margin+p_name_size+sp_el_h
	el.onload = ()=>{
		ctx.drawImage(el,0,h,image_w,image_h)
	}
  });

更多微信小程序内容欢迎关注博主和订阅专栏。

有相关业务可以联系博主。