在uniapp中nvue页面用不了Canvas解决详细案例

在 `uni-app` 中，`nvue` 页面是不支持 `Canvas` 的，但是可以通过在 `weex` 组件中调用 `Canvas` 的方式来实现。

下面是一个简单的案例，我们在 `weex` 组件中创建一个 `Canvas`，并在其中绘制一个矩形：

<template>
  <weex>
    <canvas ref="canvas" @draw="onDraw" style="width: 300px; height: 300px;"></canvas>
  </weex>
</template>

<script>
export default {
  methods: {
    onDraw({ detail }) {
      const canvas = this.$refs.canvas.$el
      const context = canvas.getContext('2d')
      context.fillStyle = 'red'
      context.fillRect(10, 10, 280, 280)
    }
  }
}
</script>

在上述示例中，我们在 `weex` 组件中创建了一个 `Canvas`，并给它设置了一个 `ref`，用于在组件中引用它。在 `onDraw` 方法中，我们获取到了 `Canvas` 元素和 `2D` 上下文对象，然后使用 `fillRect` 方法绘制了一个红色矩形。

需要注意的是，由于 `weex` 中的 `Canvas` 和 `Web` 中的 `Canvas` 有所不同，所以在使用 `Canvas` 的时候需要注意一些差异，比如 `Canvas` 的宽度和高度需要通过 `style` 属性来设置，而不是通过 `width` 和 `height` 属性来设置。

另外，需要在 `config.xml` 文件中添加以下配置，以便在 `nvue` 页面中使用 `weex` 组件：

<uni>
  <app-plus>
    <config>
      <weex></weex>
    </config>
  </app-plus>
</uni>

这样就可以在 `nvue` 页面中使用 `weex` 组件来调用 `Canvas` 了。