收藏
回答

在循环中使用新的canvas的drawImage,只能画出一张图片吗?

我在循环中使用drawImage,代码如下,只把第一张图片画出到页面了,但是循环中的每一项都打印出来了,这个是什么原因呢?
  createLongPicture() {
    // 通过 SelectorQuery 获取 Canvas 节点
    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)
    })
  }
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签