html52.com
我爱小程序-开发者交流社区

在循环中使用新的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)
    })
  }

网友回复

做你的太阳ღ₅₂₀¹³¹⁴:

想画什么东西。这个可以么https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/wxml-to-canvas.html

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付