在画布上绘制瓷砖有模糊的间隙

Question

示例:https://jsfiddle.net/jm1y9c0L/1/

代码:

const context = document.getElementById("canvas").getContext("2d");
const scale = document.getElementById("scale");
const translate = document.getElementById("translate");
scale.value = 17.78598548284369;
translate.value = 10.02842190048295;
function draw() {
context.fillStyle="#f00";
context.fillRect(0,0,1,1);
context.fillRect(1,0,1,1);
}
function update() {
const s = Number(scale.value);
const t = Number(translate.value);
context.clearRect(0,0,100,100);
context.save();
context.translate(t,t);
context.scale(s,s);
draw();
context.restore();
}
update();

问题:我如何在画布上绘制瓷砖在画布上缩放上下文没有模糊的差距?

有几点需要注意:如果我不把背景设为黑色，看起来还可以:https://jsfiddle.net/jm1y9c0L/2/

我想如果我把所有的贴图都画在缓冲区上，然后在画布上按比例画缓冲区，就可以了。但这有很多问题，一个是它可能会使用大量的内存，如果我把一个非常大的缓冲区缩小。

编辑:为了更好地解释我的目标，我想画两个相邻的矩形，其边界是分数。如果我画两个矩形，一个是绿色，一个是红色，背景是黑色的。我希望看到边界一半是绿色，一半是红色，但根本不是黑色。

Answer 1

这是因为你使用的是浮点数而不是整数，画布不能绘制0.78598548284369的像素，我建议在scale()函数中将Math.floor()放在你的比例周围:

context.scale(Math.floor(s),Math.floor(s));

希望这对你有帮助:D

Answer 2

不能在浏览器中进行亚像素渲染(至少不能期望得到一致的结果)。在您的例子中，一个矩形的结束不一定是另一个矩形的开始，因为可能存在也可能不存在由于四舍五入而产生的像素宽度的间隙。

你甚至可能会注意到一些奇怪的行为，比如在不同的屏幕位置、不同的浏览器、调整大小等得到不同的结果。

解决方法是自己计算每个像素的值，而不是让浏览器为你计算。