uni-app 在真机中canvas绘制的元素悬浮，内容不随父组件滚动问题

wendycwb2026-01-10 11:14

如图所示，在使用uni-app+vue3开发项目时，在真机上遇到一个问题，就是使用canvas绘制的标注图片，当页面滚动时，它始终悬浮在一个固定位置不动，且层级最高，悬浮在其他元素之上，使用了各种定位方法修改都不行。（模拟器上是正确的）

入图片描述](https://i-blog.csdnimg.cn/direct/51c0677b0be342aabcd07c10cf1c4735.png)

原因

后来查阅和资料发现，原来这是因为原生组件的使用限制，因canvas为原生组件，
由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制：

组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。
后插入的原生组件可以覆盖之前的原生组件。
原生组件还无法在 scroll-view、swiper、picker-view、movable-view 中使用。
部分CSS样式无法应用于原生组件，例如：无法对原生组件设置 CSS 动画
无法定义原生组件为 position:fixed
不能在父级节点使用 overflow:hidden 来裁剪原生组件的显示区域

解决办法

使用图片替换canvas显示

复制代码

<template>
  <view id="content" class="w-full !relative" :style="{ height: `${contentHeight}px` }">
    <canvas v-show="!canvasImgSrc" id="imgMark" :key="contentHeight" canvas-id="imgMark"
      :style="{ height: `${contentHeight}px`, width: '100%' }" />
    <image v-show="canvasImgSrc" :src="canvasImgSrc" mode="aspectFit" class="h-full w-full" />
  </view>
</template>

const canvasImgSrc = ref('')
const instance = getCurrentInstance()


***重点：***

ctx.draw(false, () => {
    console.log('drawCanvas>>>>>>finish>>>>>>>>')
    uni.canvasToTempFilePath({
      canvasId: 'imgMark',
      success: (res) => {
        canvasImgSrc.value = res.tempFilePath
        console.log('canvasImgSrc.value>>>>>', canvasImgSrc.value)
      },
      fail: (err) => {
        console.error('canvasToTempFilePath fail>>>>>>', err)
      },
    }, instance)
  })

特别注意：这里vue2中传this ，在vue3中传instance ，这个必传，否则会报错。

如果不传，就会一直报如下错。