奇怪的 HTML 5 画布抗锯齿

Question

我一直在玩画布元素，发现当我尝试在某些宽度/高度配置中绘制 NxN 均匀的纯色单元格时，它们之间会出现模糊的白色线条。

例如，这个画布应该看起来是黑色的，但包含某种 grid，我猜这是浏览器中抗锯齿错误的结果。

我只想说，这个错误只出现在 一些 配置中，但我想彻底摆脱它。有什么办法可以规避这种情况吗？您是否曾在画布中遇到过抗锯齿问题？

我制作了this fiddle，它演示了这个问题，并允许您使用画布的尺寸和单元格的数量。它还包含我用来绘制单元格的代码，这样您就可以检查它并告诉我是否做错了什么。

var ctx = canvas.getContext('2d');  
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
for (var i = 0; i < numberOfCells; ++i) {
    for (var j = 0; j < numberOfCells; ++j) {
    ctx.fillStyle = '#000';
    ctx.fillRect(j * cellWidth, i * cellHeight, cellWidth, cellHeight);
  }
}

提前致谢，

彼得。

Answer 1

jsFiddle : https://jsfiddle.net/ngxjnywz/2/

javascript的sn-p

var cellWidth = Math.ceil(canvasWidth / numberOfCells);
var cellHeight = Math.ceil(canvasHeight / numberOfCells);

根据宽度、高度和您的 numberOfCells，您有时会得到一个...假设 4.2 是 4，但是这会显示错误，并且会出现 1 像素的空白行。因此，您需要做的就是使用Math.ceil 函数，这将导致您的 cellWidth 和 cellHeight 始终为较大的数字，并且您将不再出现空行

Answer 2

最好的解决方案是在所有填充周围添加一个 0.5 像素宽的描边，使用与填充相同的样式并偏移所有绘图，以便在像素中心而不是左上角进行渲染。

如果您添加缩放或平移，则必须调整坐标，以便您仍然为绘图坐标提供中心。

最终您只能减少伪影，但在许多情况下您将无法完全移除它们。

此答案向您展示了如何删除未转换画布的工件。 How to fill the gaps

Answer 3

在阅读并尝试了几种方法后，我决定提出自己的方法。我创建了另一个（虚拟）画布，其整数尺寸对应于网格中的单元格数。

在其中绘制完所有单元格后，我在主画布上调用 context.drawImage() 并将虚拟画布作为参数传递给偏移量和缩放参数，以使其适合我的绘图的其余部分。假设浏览器会将虚拟画布的图像作为一个整体（而不是单个单元格）进行缩放，我希望摆脱不需要的分隔线。

尽管我很努力，但线条仍然存在。有什么建议吗？

这是展示我技术的小提琴：https://jsfiddle.net/ngxjnywz/5/