javascript - 没有抗锯齿的 HTML5

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);

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

Answer 1

只需向位置添加 0.5 个像素(或预翻译半个像素):

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

之所以可行，是因为出于某种原因， Canvas 坐标系定义了从像素中心开始的像素。当绘制的 Canvas 实际上必须对产生 4 个抗锯齿像素的单点进行子像素化。通过添加 0.5，您可以将它从中心移动到像素的 Angular 落，以便它与屏幕的坐标系相匹配，并且不必进行子像素化。

顺便说一下，这些只会影响图像，不会影响形状。

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