微信小程序：canvas 绘制图片

目的：将现有的图片添加到画布上

核心代码：

  for(let j=0; j<pg.length; j++) { // 数据只有1行，52列
      let x = j%4 * 150 + 150
      let y = Math.floor(j/4) * 70 + 120
      // 填充图片
      let imageResource1 = "/images/cards/" + pg[j].a + ".png"
      let imageResource2 = "/images/cards/" + pg[j].b + ".png"
      let img1 = canvas.createImage() //canvas 2d 通过此函数创建一个图片对象
      let img2 = canvas.createImage() //canvas 2d 通过此函数创建一个图片对象
      img1.src = imageResource1
      img2.src = imageResource2
      img1.onload = () => {
        // 异步方法，图片加载完成后才会将图片画到画布上
        // 没有回调函数，什么时候画完也不知道，so 不知道什么时候能够将画布保存
        ctx.drawImage(img1, x, y, 45, 60) // drawImage(imageResource, dx, dy, dWidth, dHeight) 缩放图片
      }
      img2.onload = () => {
        // 异步方法，图片加载完成后才会将图片画到画布上
        // 没有回调函数，什么时候画完也不知道，so 不知道什么时候能够将画布保存
        ctx.drawImage(img2, x+50, y, 45, 60) // drawImage(imageResource, dx, dy, dWidth, dHeight) 缩放图片
      }
  }

注意1：drawImage(imageResource, dx, dy, dWidth, dHeight)，参数imageResource不能是个字符串，必须是image对象（这里使用的是本地图片，不是网络图片）。

注意2：必须在图片加载完成后（Image.onload）再调用drawImage方法，否则画了个寂寞。

注意3：drawImage方法目前没有回调函数，所以不知道其什么时候执行完成。带来的问题就是不知道什么时候才可以将canvas画布保存为图片。如果立即保存，你会保存个寂寞。下图在画布上绘制了104张5k大小的图片，使用setTimeout，预留了5秒钟，5秒之后将canvas保存为图片，成功！

微信图片_20211029232156.jpg