Javascript HTML5<；帆布>；无抗锯齿

我使用整数值

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像素的线，但我看到平滑的间隙：

---

只需将0.5像素添加到位置（或预平移半像素）：

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

这些仅影响图像，不影响形状顺便说一句：

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

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