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

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

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

相关推荐
2301_805962937 分钟前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero8 分钟前
微信小程序121~130
微信小程序·小程序
難釋懷12 分钟前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++
清颖~13 分钟前
原生微信小程序研发,如何对图片进行统一管理?
微信小程序·小程序
军军君0123 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
默魔6 小时前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
阿俊-全栈开发17 小时前
crmeb多门店对接拉卡拉支付小程序聚合收银台集成全流程详解
小程序·php·拉卡拉聚合收银台·拉卡拉三方支付
難釋懷1 天前
微信小程序全局配置
微信小程序·小程序
Enti7c1 天前
微信小程序核心知识点速览
微信小程序·小程序
2501_915918412 天前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview