奇怪的HTML 5 Canvas Antialiasing

Question

我一直在玩canvas元素，并发现当我尝试将NxN均匀的纯色单元格彼此相邻绘制时，在某些宽度/高度配置中，它们之间存在模糊的白色线条。

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

可以说，这个bug只出现在某些配置中，但我想彻底摆脱它。 有没有办法绕过这个？ 你有没有在画布抗锯齿的问题？

我做了这个小提琴演示了这个问题，并允许你玩画布的尺寸和细胞数量。 它还包含我用来绘制单元格的代码，以便您可以检查它并告诉我是否做错了什么。

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的片段

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像素宽的笔触，使用与填充相同的样式并偏移所有绘图，以便在像素的中心而不是左上角渲染。

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

最后，您只能减少工件，但在许多情况下，您将无法完全删除它们。

此答案向您展示如何删除未转换画布的工件。 如何填补空白

Answer 3

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

在绘制了所有单元格之后，我在主画布上调用了context.drawImage() ，并将虚拟画布作为参数与offset和scale参数一起传递，使其适合我的绘图的其余部分。 假设浏览器将整个虚拟画布的图像（而不是单个单元格）缩放，我希望摆脱不需要的分隔线。

尽管我努力，但仍然存在这些路线。 有什么建议？

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