没有消除锯齿的HTML5 <canvas> </canvas>

Question

我使用带有整数值的fillRect(x, y, 9, 9)并查看平滑的矩形（见下文）。我尝试了以下但没有运气：

this.ctx.webkitImageSmoothingEnabled = false;
this.ctx.imageSmoothingEnabled = false;

var iStrokeWidth = 1;  
var iTranslate = (iStrokeWidth % 2) / 2;
this.ctx.translate(iTranslate, iTranslate);

我想在蓝色块之间看到一条1像素的线，但我看到平滑的间隙：

Answer 1

只需向位置添加0.5像素（或预翻译半像素）：

fillRect(x + 0.5, y + 0.5, 9, 9);

这是有效的，因为由于某种原因，画布坐标系定义了像素中心的像素的起点。当绘制画布实际上必须以单像素为子像素时产生4个抗锯齿像素。通过添加0.5，您可以将其从中心移动到像素的角落，使其与屏幕的坐标系匹配，并且不必进行子像素化。

这些仅影响图像，而不影响形状btw。：

this.ctx.webkitImageSmoothingEnabled = false;
this.ctx.imageSmoothingEnabled = false;