如下所示,在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)
}
});
更多微信小程序内容欢迎关注博主和订阅专栏。
有相关业务可以联系博主。