使用Canvas的.rotate()方法旋转图形时残留1px线条的问题求助

嘿，我来帮你拆解这个问题！你遇到的残留线条问题，主要有两个核心原因，咱们一步步理清楚：

一、清屏操作的坐标系错误 #

你初始化时执行了ctx.translate(150, 150)把画布原点移到了中心，但每次循环里的清屏代码ctx.fillRect(0, 0, canvas.width, canvas.height)是基于变换后的坐标系绘制的——这意味着你每次只覆盖了从画布中心向右下的300x300区域，画布左上部分的旧图形根本没被清除，时间久了就会留下残留线条。

二、旋转时的亚像素渲染残留 #

Canvas的抗锯齿机制在处理旋转图形时，会对边缘进行亚像素采样，这些半透明的像素如果没被完全覆盖，也会看起来像1px的残留线条。

解决办法 #

针对这两个问题，调整你的代码就能解决，我给你修改后的版本：

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
canvas.width = 300;
canvas.height = 300;

// 初始化画布背景
ctx.fillStyle = "#303030";
ctx.fillRect(0, 0, canvas.width, canvas.height)

let turnSquare = setInterval(() =>{
  // 关键：重置变换矩阵，回到原始坐标系再清屏
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.fillStyle = "#303030"
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  
  // 重新设置平移和旋转
  ctx.translate(150, 150)
  ctx.rotate(degree(10))
  
  // 绘制正方形（改为绕自身中心旋转，视觉更自然）
  ctx.beginPath()
  ctx.fillStyle = "lime"
  ctx.fillRect(-50, -50, 100, 100)
}, 1000 / 20)

function degree(input){
  return 2 * Math.PI / 360 * input
}

关键修改点说明： #

• 用ctx.setTransform(1, 0, 0, 1, 0, 0)重置变换矩阵，回到原始坐标系清屏，确保整个画布都被覆盖。
• 把正方形的绘制起点从(0,0)改成(-50,-50)，让正方形绕自身中心旋转，避免因绕左上角旋转导致的位置偏移残留。
• 每次循环重新执行translate和rotate，避免变换累积引发的坐标系偏移问题。

如果还是担心亚像素残留，可以在清屏时先调用ctx.clearRect(0,0,canvas.width,canvas.height)再填充背景，双重保障清除旧图形。

内容的提问来源于stack exchange，提问作者91WalcNosmirc