🐛 H5环境下 canvas 的原点坐标被重置了, 只有小程序里面是正常的

[buuing]

问题描述

1. 通过ctx.translate(100, 100)设置原点坐标为(100, 100), 并绘制了一个红色的点
2. H5环境下使用new Image()加载图片, 小程序环境下使用canvas.createImage()加载图片
3. 图片onload加载成功之后, 基于原点绘制了一个蓝色的点
4. 结果发现uni-app编译的H5环境下, 原点坐标被意外的重置了

复现步骤

<template>
  <view>
    <canvas type="2d" id="my-canvas" canvas-id="my-canvas" style="border: 1px solid #000;" />
  </view>
</template>

<script>
export default {
  mounted () {
    uni.createSelectorQuery().in(this).select('#my-canvas').fields({
      node: true, size: true
    }).exec((res) => {
      // #ifdef H5
      // H5 环境下手动获取 canvas 节点
      res[0].node = document.querySelector('#my-canvas canvas')
      // #endif
      const canvas = res[0].node
      // 获取canvas上下文
      const ctx = canvas.getContext('2d')
      // 设置原点坐标为(100, 100)
      ctx.translate(100, 100)
      // 正常的原点坐标是(100, 100), 这里用红色来标记
      this.drawPoint(ctx, 20, 'red')

      // ----------- 下面开始复现bug ----------------------------
      let img
      // H5 环境下才能使用 new Image()
      // #ifdef H5
      img = new Image()
      // #endif
      // 小程序环境下使用 canvas.createImage
      // #ifdef MP
      img = canvas.createImage()
      // #endif
      img.onload = () => {
        /**
         * 绘制一个蓝色的点, 此时 H5 环境下会出现 bug
         * H5 环境下的原点坐标被重置了
         * 但是小程序环境下的原点坐标没变, 才是正常的
         */
        this.drawPoint(ctx, 10, 'blue')
      }
      // 随便找了个图片
      img.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png'
    })
  },
  methods: {
    // 基于 canvas 的原点坐标绘制一个点
    drawPoint (ctx, radius, color) {
      ctx.beginPath()
      ctx.fillStyle = color
      ctx.arc(0, 0, radius, 0, 7)
      ctx.fill()
      ctx.closePath()
    }
  }
}
</script>

预期结果

正常的渲染效果应该是两个点重合, 就像是小程序里面的渲染效果一样

实际结果

系统信息:

• 发行平台: H5平台
• 操作系统: win10 / mac
• HBuilderX版本: 3.2.2.20210818
• uni-app版本 [如使用Vue-cli创建/运行项目，则提供npm run info的运行结果]
• 设备信息: 谷歌浏览器

补充信息

无

[buuing]

你好, 我问一下, github上面反馈的问题有人看吗

[zhetengbiji]

收到，等待排查

[StrivingRabbit]

问题已确认，后续修复

[buuing]

方便问一下这个问题将会在哪个版本修复啊

[StrivingRabbit]

下一个alpha应该会带上的