uniapp canvas app上报错，如何解决？

Question

uniapp vue3.2 setup语法糖
用canvas在真机上运行会报错
只是加个canvas标签也会

 <canvas class="canvasCCT" canvas-id="canvasCCT" disable-scroll="true" @click="onclickStart"
            @touchstart="ontouchStart" @touchmove="ontouchMove">
            <canvas class="pointCCT" canvas-id="pointCCT" disable-scroll="true"></canvas>
        </canvas>

[WARNING] :Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently at uni-app-view.umd.js:1

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

这个问题可能是由于canvas元素的渲染模式导致的。默认情况下，canvas的渲染模式是基于硬件加速的，即每次绘制时都会获取一次数据。

如果你想要禁用滚动，并且使用图片数据来渲染canvas，你可以这样设置：

this.$refs.canvas.enableScroll = false;
this.$refs.canvas.setData('image', 'https://example.com/image.jpg');

然后，在你的组件中添加一个方法来切换渲染模式：

methods: {
  changeCanvasMode() {
    this.$refs.canvas.enableScroll = !this.$refs.canvas.enableScroll;
  }
}

如果这个问题仍然存在，你可以尝试检查一下你的浏览器的兼容性。有些现代浏览器支持canvas元素的willReadFrequently属性，这个属性可以在设置canvas的渲染模式时启用。如果有的话，那么你的问题可能就出在这里了。

另外，你也可以尝试把canvas放在一个可以滚动的位置，比如div或absolute定位的div。

下面是一个修改后的示例代码：

<template>
  <div ref="canvas" style={{ overflow: 'hidden' }}>
    <canvas id="canvasCCT" width="500" height="500"></canvas>
    <canvas id="pointCCT" width="500" height="500"></canvas>
    <button @click="changeCanvasMode">Change Canvas Mode</button>
  </div>
</template>

<script>
export default {
  components: {
    canvas: {
      props: ['width', 'height'],
      render: function (h) {
        return h('canvas');
      }
    },
  },
  methods: {
    changeCanvasMode() {
      this.$refs.canvas.enableScroll = !this.$refs.canvas.enableScroll;
    }
  }
};
</script>

在这个例子中，我将canvas放在了一个绝对定位的div中，这使得canvas可以和div在同一页面上，并且当用户滚动容器时，canvas会被调整到合适的位置。