在UniApp中使用Canvas绘图时，常常会遇到一些容易忽略的问题和陷阱。本文将总结这些易错点，并提供解决方案，帮助你避免踩坑，提升开发效率。

1. 易错点与踩坑指南

1.1 Canvas上下文未正确获取

• 问题描述：
  • 调用uni.createCanvasContext后，绘图操作未生效。
• 原因：
  • 未正确获取Canvas上下文，或未调用ctx.draw()方法。
• 解决方案：
  1. 确保正确获取Canvas上下文：

     1	const ctx = uni.createCanvasContext('myCanvas');

  2. 在绘图操作后调用ctx.draw()：

     1 2	ctx.fillRect(10, 10, 100, 100); ctx.draw(); // 必须调用draw方法才会生效

1.2 Canvas尺寸设置不当

• 问题描述：
  • Canvas绘图内容显示不全或完全不可见。
• 原因：
  • Canvas的宽度或高度设置不正确，或者未适配屏幕分辨率。
• 解决方案：
  1. 在<canvas>标签中设置正确的宽度和高度：

     1	<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>

  2. 使用uni.getSystemInfoSync获取屏幕宽度并动态设置Canvas尺寸：

     1 2 3

     const systemInfo = uni.getSystemInfoSync(); const canvasWidth = systemInfo.windowWidth; const canvasHeight = systemInfo.windowHeight;

1.3 Canvas层级问题

• 问题描述：
  • Canvas被其他组件遮挡，导致绘图内容不可见。
• 原因：
  • Canvas的层级（z-index）较低，或被其他组件覆盖。
• 解决方案：
  1. 使用position: fixed或position: absolute提升Canvas层级：

     1	<canvas canvas-id="myCanvas" style="position: fixed; top: 0; left: 0;"></canvas>

  2. 避免在Canvas上方放置其他组件。

1.4 Canvas渲染时机问题

• 问题描述：
  • 在页面加载时绘图，但内容未显示。
• 原因：
  • Canvas渲染时机过早，页面尚未完全加载。
• 解决方案：
  1. 在onReady生命周期中执行绘图操作：

     1 2 3 4 5 6 7

     export default { onReady() { const ctx = uni.createCanvasContext('myCanvas'); ctx.fillRect(10, 10, 100, 100); ctx.draw(); } };

  2. 使用setTimeout延迟绘图操作：

     1 2 3 4 5

     setTimeout(() => { const ctx = uni.createCanvasContext('myCanvas'); ctx.fillRect(10, 10, 100, 100); ctx.draw(); }, 500);

1.5 Canvas绘图性能问题

• 问题描述：
  • 绘图操作卡顿或延迟。
• 原因：
  • 绘图操作过于频繁，或Canvas尺寸过大。
• 解决方案：
  1. 减少不必要的绘图操作。
  2. 使用ctx.draw(true)开启离屏渲染，提升性能。

1.6 Canvas绘图内容模糊

• 问题描述：
  • 绘图内容显示模糊。
• 原因：
  • Canvas的CSS尺寸与画布分辨率不匹配。
• 解决方案：
  1. 使用uni.getSystemInfoSync获取设备像素比（pixelRatio），并设置Canvas的实际分辨率：

     1 2 3 4

     const systemInfo = uni.getSystemInfoSync(); const pixelRatio = systemInfo.pixelRatio; const canvasWidth = 300 * pixelRatio; const canvasHeight = 300 * pixelRatio;

  2. 在CSS中设置Canvas的显示尺寸为逻辑像素：

     1	<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>

2. 示例代码

以下是一个完整的Canvas绘图示例，涵盖了上述问题的解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

<script>
export default {
  onReady() {
    this.drawCanvas();
  },
  methods: {
    drawCanvas() {
      const systemInfo = uni.getSystemInfoSync();
      const pixelRatio = systemInfo.pixelRatio;
      const canvasWidth = 300 * pixelRatio;
      const canvasHeight = 300 * pixelRatio;

      const ctx = uni.createCanvasContext('myCanvas');
      ctx.fillRect(10, 10, 100, 100);
      ctx.draw();
    }
  }
};
</script>

<style>
canvas {
  position: fixed;
  top: 0;
  left: 0;
}
</style>

3. 总结

在UniApp中使用Canvas绘图时，常见的易错点包括上下文未正确获取、Canvas尺寸问题、层级问题和渲染时机问题。通过本文提供的解决方案，你可以快速定位并解决这些问题，确保Canvas绘图内容正常显示。

希望这篇博客对你有帮助！如果有其他问题，欢迎随时交流！ 🚀