微信小程序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)
	}
  });

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

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

相关推荐
00后程序员张1 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220694 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld4 小时前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄6 小时前
mobx-miniprogram小程序的数据传输
小程序
说私域8 小时前
“开源AI智能名片链动2+1模式S2B2C商城小程序”在直播公屏引流中的应用与效果
人工智能·小程序·开源
!win !10 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
毕设源码-钟学长12 小时前
【开题答辩全过程】以 “旧书驿站”微信小程序的设计与开发为例,包含答辩的问题和答案
微信小程序·小程序