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

我想在蓝色 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;