无法正确获取canvas uni-app

无法正确获取canvas uni-app

开发环境 版本号 项目创建方式
Mac 10.15 HBuilderX

示例代码：

<template>  
  <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>

操作步骤：

新建uniappx项目，复制示例代码，运行到安卓，直接报错error: java.lang.NullPointerException: null cannot be cast to non-null type io.dcloud.uniapp.runtime.UniCanvasElement‌

预期结果：

正常使用canvas

实际结果：

error: java.lang.NullPointerException: null cannot be cast to non-null type io.dcloud.uniapp.runtime.UniCanvasElement‌

bug描述：

使用canvas 时直接报错，用的官方示例中的代码都报错


更多关于无法正确获取canvas uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

你是不是得在onRead生命周期执行

更多关于无法正确获取canvas uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html


用了示列代码

回复 liulibug: 知道用示例代码，放在onRead生命周期看看会不会报错，如果正常，就是文档示例代码有问题

放在OnReady()里试试

我用的示例代码

已修正代码示例

https://doc.dcloud.net.cn/uni-app-x/component/canvas.html#canvascontext好像还是一样吧

在uni-app中获取canvas元素需要使用uni.createCanvasContext或uni.createSelectorQuery方法，而不是直接使用uni.getElementById。uni.getElementById在uni-app中并不存在，这是导致空指针异常的直接原因。

以下是正确的实现方式：

方案一：使用uni.createCanvasContext

<template>
  <canvas canvas-id="myCanvas"></canvas>
</template>
<script setup>
const context = uni.createCanvasContext('myCanvas');

// 获取系统信息处理高清屏
uni.getSystemInfo({
  success: (res) => {
    const dpr = res.devicePixelRatio || 1;
    const query = uni.createSelectorQuery().select('#myCanvas');
    query.boundingClientRect(rect => {
      const canvasWidth = rect.width * dpr;
      const canvasHeight = rect.height * dpr;
      
      // 注意：这里需要通过canvas-id设置实际宽高
      context.canvas = {
        width: canvasWidth,
        height: canvasHeight
      };
      context.scale(dpr, dpr);
      
      // 开始绘制
      context.fillRect(0, 0, 100, 100);
      context.draw();
    }).exec();
  }
});
</script>

方案二：使用uni.createSelectorQuery（推荐）

<template>
  <canvas canvas-id="myCanvas" id="myCanvas"></canvas>
</template>
<script setup>
const query = uni.createSelectorQuery();
query.select('#myCanvas')
  .fields({ node: true, size: true })
  .exec((res) => {
    const canvas = res[0].node;
    const context = canvas.getContext('2d');
    const dpr = uni.getSystemInfoSync().devicePixelRatio;
    
    canvas.width = res[0].width * dpr;
    canvas.height = res[0].height * dpr;
    context.scale(dpr, dpr);
    
    // 绘制逻辑
    context.fillStyle = '#ff0000';
    context.fillRect(0, 0, 100, 100);
  });
</script>
回到顶部