我在循环中使用drawImage,代码如下,只把第一张图片画出到页面了,但是循环中的每一项都打印出来了,这个是什么原因呢?
createLongPicture() {
wx.createSelectorQuery()
.select('#canvas')
.fields({
node: true,
size: true,
})
.exec(this.init2.bind(this))
},
init2(res) {
let that = this
let canvas = res[0].node;
let ctx = canvas.getContext('2d')
ctx.save();
ctx.beginPath();
var imgPool = [
{ 'path': that.data.testImg2, 'x': 20, 'y': 0, 'width': 343, 'height': 200 },
{ 'path': that.data.testImg, 'x': 20, 'y': 210, 'width': 343, 'height': 200 },
]
var promise_list = []
imgPool.forEach((item) => {
promise_list.push(
new Promise((resolve, reject) => {
item.img = canvas.createImage()
item.img.src = item.path;
item.img.onload = () => {
console.log('开始绘制图片')
resolve(item)
};
})
)
})
Promise.all(promise_list).then(function (results) {
results.forEach((item) => {
console.log('item===', item)
ctx.drawImage(item.img,item.x,item.y,item.width,item.height)
ctx.closePath();
ctx.restore();
})
}).catch(function (reason) {
console.log(reason)
})
}
想画什么东西。这个可以么https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/wxml-to-canvas.html