调用ClearCanvas后Canvas无法正常绘图的问题求助

这个Canvas清除后绘图偏移、甚至消失的问题我碰到过好几次，大概率是以下两个核心原因导致的，咱们一步步来排查解决：

一、最常见原因：Canvas属性宽高与样式宽高不匹配 #

很多开发者会用CSS设置Canvas的width/height样式，但Canvas的绘图坐标系是基于它自身的width和height属性的，如果样式尺寸和属性尺寸不一致，会导致画布被拉伸，清除后绘图的坐标会被错误缩放，出现“图形只显示在底部”或者完全看不到的情况。

比如你给Canvas设置了style.width: 800px，但Canvas自身的width属性只有400，那绘图时的坐标会被横向放大2倍，原本画在(0,0)的方块，视觉上会被偏移，甚至超出画布范围。

解决办法： #

初始化Canvas时，确保属性宽高和样式宽高完全一致：

const canvas = document.getElementById('your-canvas-id');
const ctx = canvas.getContext('2d');

// 设置Canvas的实际绘图尺寸（属性）
canvas.width = 800;
canvas.height = 600;
// 设置样式尺寸和属性一致，避免拉伸
canvas.style.width = `${canvas.width}px`;
canvas.style.height = `${canvas.height}px`;

二、容易忽略的原因：绘图上下文的变换未重置 #

如果你的代码之前使用过ctx.translate()、ctx.scale()这类变换方法，清除画布时没有重置变换矩阵，那么后续的fillRect会基于之前的变换坐标来绘制，导致图形位置偏移到画布外，看起来就像“完全无内容显示”。

解决办法： #

修改你的ClearCanvas函数，添加重置变换矩阵的逻辑：

function ClearCanvas() {
  // 先保存当前上下文状态（可选，如果你需要恢复之前的变换）
  ctx.save();
  // 重置变换矩阵为初始状态：无缩放、无平移
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  // 清除整个画布（用Canvas自身的属性宽高，确保清除彻底）
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 恢复之前的上下文状态（如果不需要保留之前的变换，可省略这一行）
  ctx.restore();
}

三、额外检查点：绘图坐标是否正确 #

确认你调用fillRect()时的x、y坐标是基于Canvas的属性宽高，而不是样式宽高。比如如果Canvas属性宽高是400x400，那么fillRect(0, 0, 50, 50)会准确画在左上角，不会出现偏移。

测试示例（修改后） #

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 初始化Canvas宽高，保证属性与样式一致
canvas.width = 400;
canvas.height = 400;
canvas.style.width = `${canvas.width}px`;
canvas.style.height = `${canvas.height}px`;

const width = 50;
const height = 50;
const interpolate = d3.interpolate('white', 'black');

function ClearCanvas() {
  ctx.save();
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.restore();
}

function drawSquare() {
  ctx.fillStyle = interpolate(0.5);
  ctx.fillRect(0, 0, width, height);
}

// 第一次绘图
drawSquare();
// 清除后重新绘图
setTimeout(() => {
  ClearCanvas();
  drawSquare();
}, 1000);
// 再次清除后绘图
setTimeout(() => {
  ClearCanvas();
  drawSquare();
}, 2000);

按照上面的方法修改后，应该就能解决清除Canvas后绘图异常的问题了。

内容的提问来源于stack exchange，提问作者Jordan Baron