如何解决Canvas未正常渲染的问题

如何解决Canvas未正常渲染的问题：关键修改解析

在前端开发中，Canvas 是一个强大的绘图工具，广泛应用于图形绘制、动画制作等场景。然而，初学者在使用 Canvas 时，常常会遇到渲染不正常的问题。本文将通过一个实际案例，深入解析问题的关键所在，并详细说明如何进行修改以实现正常渲染。

问题描述

在一个基于 UniApp 的项目中，开发者尝试在 Canvas 上绘制一个矩形。以下是初始代码：

JavaScript 部分

drawTest() {
  console.log("开始绘制矩形");

  setTimeout(() => {
    const context = uni.createCanvasContext("testCanvas", this);

    if (!context) {
      console.error("获取 canvas 上下文失败");
      return;
    }

    console.log("获取 canvas 上下文成功");

    context.setFillStyle("#FF0000");
    context.fillRect(50, 50, 200, 100);
    context.setStrokeStyle("#000000");
    context.strokeRect(50, 50, 200, 100);
    context.setFontSize(16);
    context.setFillStyle("#000000");
    context.fillText("测试矩形", 100, 40);

    console.log("开始绘制");
    context.draw();
    console.log("矩形绘制完成");
  }, 3);
}

HTML 部分

<view class="canvas-section">
  <canvas
    canvas-id="testCanvas"
    style="width: 300px; height: 150px; border: 1px solid #000; display: block; margin: 0 auto;"
  ></canvas>
  <button @click="drawTest">绘制矩形</button>
</view>

尽管代码逻辑看似正确，但点击“绘制矩形”按钮后，Canvas 上并未显示任何图形。

关键问题分析

通过对代码的逐步分析，发现以下几个关键问题导致 Canvas 未能正常渲染：

1. Canvas 尺寸设置不当

问题：
Canvas 的尺寸仅通过 CSS 样式设置，而没有在 <canvas> 标签上明确指定 width 和 height 属性。在某些平台（如微信小程序、UniApp）中，Canvas 的绘制区域大小依赖于 width 和 height 属性，而非 CSS 样式。如果仅通过 CSS 设置尺寸，可能导致绘制区域与显示区域不一致，甚至绘制内容完全不显示。

原始代码：

<canvas
  canvas-id="testCanvas"
  style="width: 300px; height: 150px; border: 1px solid #000; display: block; margin: 0 auto;"
></canvas>

解决方案：
在 <canvas> 标签上直接添加 width 和 height 属性，确保绘制区域与显示区域大小一致。同时保留 CSS 样式以控制视觉效果。

修改后代码：

<canvas
  canvas-id="testCanvas"
  width="300"
  height="150"
  style="border: 1px solid #000; display: block; margin: 0 auto;"
></canvas>

2. 不必要且过短的 setTimeout 延迟

问题：
原代码中使用了 setTimeout 延迟 3 毫秒后执行绘制逻辑。这种极短的延迟可能不足以确保 Canvas 上下文完全初始化，特别是在不同设备或平台上，导致绘制操作在上下文未准备好的情况下执行，最终导致渲染失败。

原始代码：

setTimeout(() => {
  // 绘制逻辑
}, 3);

解决方案：
移除 setTimeout，直接执行绘制逻辑，确保在按钮点击事件触发时，Canvas 上下文已经准备就绪。如果确实需要延迟，可以适当增加延迟时间，但通常不推荐这样做。

修改后代码：

drawTest() {
  console.log("开始绘制矩形");

  const context = uni.createCanvasContext("testCanvas", this);

  if (!context) {
    console.error("获取 canvas 上下文失败");
    return;
  }

  console.log("获取 canvas 上下文成功");

  context.setFillStyle("#FF0000");
  context.fillRect(50, 50, 200, 100);
  context.setStrokeStyle("#000000");
  context.strokeRect(50, 50, 200, 100);
  context.setFontSize(16);
  context.setFillStyle("#000000");
  context.fillText("测试矩形", 100, 40);

  console.log("开始绘制");
  context.draw(false, () => {
    console.log("矩形绘制完成");
  });
}

完整的修正后代码

结合上述关键修改，以下是修正后的完整 Vue 组件代码：

Vue 模板部分

<template>
  <view class="canvas-section">
    <canvas
      canvas-id="testCanvas"
      width="300"
      height="150"
      style="border: 1px solid #000; display: block; margin: 0 auto;"
    ></canvas>
    <button @click="drawTest">绘制矩形</button>
  </view>
</template>

Vue 脚本部分

<script>
export default {
  methods: {
    drawTest() {
      console.log("开始绘制矩形");

      const context = uni.createCanvasContext("testCanvas", this);

      if (!context) {
        console.error("获取 canvas 上下文失败");
        return;
      }

      console.log("获取 canvas 上下文成功");

      context.setFillStyle("#FF0000");
      context.fillRect(50, 50, 200, 100);
      context.setStrokeStyle("#000000");
      context.strokeRect(50, 50, 200, 100);
      context.setFontSize(16);
      context.setFillStyle("#000000");
      context.fillText("测试矩形", 100, 40);

      console.log("开始绘制");
      context.draw(false, () => {
        console.log("矩形绘制完成");
      });
    }
  }
};
</script>

Vue 样式部分

<style scoped>
.canvas-section {
  padding: 20px;
}
</style>

验证结果

经过上述关键修改后，点击“绘制矩形”按钮，Canvas 上成功显示了一个红色填充、黑色边框的矩形，并在上方显示了“测试矩形”文字。控制台也正确输出了以下日志信息，确认了绘制流程的执行情况：

开始绘制矩形
获取 canvas 上下文成功
开始绘制
矩形绘制完成