<canvas id="canvas"></canvas>
</template>
<script setup>
const canvas = uni.getElementById("canvas") as UniCanvasElement
const context = canvas.getContext("2d")!;
// 处理高清屏逻辑
const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
canvas.width = canvas.offsetWidth * dpr;
canvas.height = canvas.offsetHeight * dpr;
context.scale(dpr, dpr); // 仅需调用一次，当调用 reset 方法后需要再次 scale
// 省略绘制代码，和 w3c 规范保持一致
</script>
liulibug
- 发布：2025-06-18 15:58
- 更新：2025-06-19 10:32
- 阅读：85
产品分类： uni-app x/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 10.15
HBuilderX类型： 正式
HBuilderX版本号： 4.66
手机系统： Android
手机系统版本号： Android 13
手机厂商： 华为
手机机型： 无
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
新建uniappx项目，复制示例代码，运行到安卓，直接报错error: java.lang.NullPointerException: null cannot be cast to non-null type io.dcloud.uniapp.runtime.UniCanvasElement
新建uniappx项目，复制示例代码，运行到安卓，直接报错error: java.lang.NullPointerException: null cannot be cast to non-null type io.dcloud.uniapp.runtime.UniCanvasElement
预期结果：
正常使用canvas
正常使用canvas
实际结果：
error: java.lang.NullPointerException: null cannot be cast to non-null type io.dcloud.uniapp.runtime.UniCanvasElement
error: java.lang.NullPointerException: null cannot be cast to non-null type io.dcloud.uniapp.runtime.UniCanvasElement
bug描述：
使用canvas 时直接报错，用的官方示列中的代码都报错
liulibug (作者)
用了示列代码
2025-06-18 17:01
蔡cai
回复 liulibug: 知道用示例代码，放在onRead生命周期看看会不会报错，如果正常，就是文档示例代码有问题
2025-06-18 17:02