奇怪的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

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

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

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

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