uni-app 引用画布元素canvas组件就会报错（id属性不存在）

uni-app 引用画布元素canvas组件就会报错（id属性不存在）

示例代码：

<canvas></canvas>

操作步骤：

直接引入canvas元素：

<canvas></canvas>

预期结果：

能正常引入canvas元素

实际结果：

Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'id')"

bug描述：

直接引入<canvas></canvas>就会报错
报错：Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'id")"

产品分类：

  • uniapp/H5

PC开发环境操作系统：

  • Windows

PC开发环境操作系统版本号：

  • 11

HBuilderX类型：

  • 正式

HBuilderX版本号：

  • 4.29

浏览器平台：

  • Chrome

浏览器版本：

  • 135.0.7049.85

项目创建方式：

  • HBuilderX

更多关于uni-app 引用画布元素canvas组件就会报错（id属性不存在）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

并未复现此问题，可以发下复现demo吗

更多关于uni-app 引用画布元素canvas组件就会报错（id属性不存在）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我在别的项目有复现不了，只有我的项目中存在这个问题，包括我直接使用<editor></editor>也会报同样的错误，有人说是使用了uni-simple-router这个插件之后，好多uni自带的组件都用不了，请问有出现过此类问题吗

回复 9***@qq.com: 可以提供下复现demo吗？方便更好的排查问题

在uni-app中使用canvas组件确实需要特别注意，这个报错是因为uni-app的canvas组件必须指定canvas-id属性。以下是关键点：

  1. 必须添加canvas-id属性：
<canvas canvas-id="myCanvas"></canvas>

  1. 在H5平台下，uni-app会将canvas-id映射为DOM的id属性，所以不能省略。

  2. 获取canvas上下文的方式：

const ctx = uni.createCanvasContext('myCanvas')
  1. 如果需要在H5中直接操作DOM，可以使用$refs方式获取：
<canvas ref="myCanvas" canvas-id="myCanvas"></canvas>
回到顶部