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

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

javascript 复制代码
  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循环加载图片,如下所示:

javascript 复制代码
  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)
	}
  });

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

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

相关推荐
澄江静如练_2 小时前
微信小程序发体验版
微信小程序·小程序
流口水的兔子6 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记6 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~183399481217 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero9 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠10 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu21 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域1 天前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域1 天前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔1 天前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序