javascript - 当使用 .rotate() 时，它会留下 1px 线

Question

我目前正在学习 html5 Canvas ，我正在制作一个程序，使用 .rotate() 函数围绕页面中心旋转一个正方形，但它留下了距离正方形原来位置 1px 的线即使我每次都在填充 Canvas ，并且代码中没有任何内容是 1px。有人可以解释一下为什么会发生这种情况以及如何阻止它发生

谢谢!

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")

canvas.width = 300;
canvas.height = 300;

//debugger;
/*
canvas.addEventListener("mousedown", mouseDown, false)
canvas.addEventListener("mouseup", mouseUp, false)
canvas.addEventListener("mousemove", mouseMove, false)
*/

ctx.fillStyle = "#303030";
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.translate(150, 150)

let turnSquare = setInterval(() =>{
	ctx.fillStyle = "#303030"
	ctx.fillRect(0, 0, canvas.width, canvas.height)

	ctx.rotate(degree(10))

	ctx.beginPath()
	ctx.fillStyle = "lime"
	ctx.fillRect(0, 0, 100, 100)

}, 1000 / 20)

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

<canvas id="canvas">

Answer 1

抗锯齿边缘。

您得到 ~1px 行的原因是因为用于清除 Canvas 的 ctx.fillRect 是通过用于绘制框的相同转换进行转换的。

渲染形状时，其边缘为 anti-aliased ，一些边缘像素被绘制为半透明，这意味着在同一框上绘制将留下一些原始像素。

修复

• 在清除 Canvas 之前将变换重置为默认值。 ctx.setTransform(1,0,0,1,0,0);

• 使用变量来保存盒子的总旋转(参见示例)

• 使用 setTransform 替换当前变换，而不是使用 ctx.translate 和 ctx.rotate 分阶段构建变换。

  Transform basics同时帮助理解如何使用 setTransform 在 2D canvas API 中定位、缩放和旋转渲染对象。

其他要点

• 使用 requestAnimationFrame 而不是 setInterval 调用动画循环，以确保尽可能流畅的动画。
• 使用单个对象来存储相关数据。例如，示例中的对象 box 保存了为框设置动画所需的所有相关数据。
• 尝试以有意义的方式表达动画。在示例中，框旋转速率 box.rotSpeed 设置为每秒旋转

示例

requestAnimationFrame(mainLoop);
const ctx = canvas.getContext("2d")
canvas.height = canvas.width = 300;
canvas.style.backgroundColor = "#303030"

const box = {
   color: "lime",
   cx: 0.25,  // x rotation center as fraction of box size
   cy: 0.25,  // y rotation center as fraction of box size
   x: 150,
   y: 150,
   size: (150 * 150 / 2) ** 0.5, // makes diagonal size of box 150
   rot: 0,
   rotSpeed: 0.5,  // in rotations per second
};
function drawBox(box) {
   box.rot += box.rotSpeed * Math.PI / 30; // 2*PI/60 is one rotation per second at 60FPS
   ctx.fillStyle = box.color;
   const xa = Math.cos(box.rot);
   const ya = Math.sin(box.rot);
   ctx.setTransform(xa, ya, -ya, xa, box.x, box.y);
   ctx.fillRect(-box.cx * box.size, -box.cy * box.size, box.size, box.size);
} 
function mainLoop() {
   ctx.setTransform(1, 0, 0, 1, 0, 0); // set default transform
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   drawBox(box);
   requestAnimationFrame(mainLoop);
}

<canvas id="canvas">