为什么lineTo（）会改变内部像素？

Question

这种情况很难解释，所以让我用图片来说明：

创建的第一个形状内的像素被减轻。屏幕用黑色清除，绘制红色和绿色框，然后绘制路径。到目前为止，我发现的唯一修复方法是将框的线宽设置为2像素，原因如here所述。

以下是用于绘制正方形的代码：

sctx.save();
sctx.strokeStyle = this.color;
sctx.lineWidth = this.width;
sctx.beginPath();
sctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++)
{
    sctx.lineTo(this.points[i].x, this.points[i].y);
}
sctx.closePath();
sctx.stroke();
sctx.restore();

和线：

sctx.save();
sctx.strokeStyle = 'orange';
sctx.lineWidth = 5;
console.log(sctx);
sctx.beginPath();
sctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++)
{
    sctx.lineTo(this.points[i].x, this.points[i].y);
}
sctx.closePath();
sctx.stroke();
sctx.restore();

以2px宽度绘制相同情况的图片：

lineTo()是否可能会弄乱alpha值？非常感谢任何帮助。

编辑：为了澄清，当从绘制的路径中省略sctx.closePath();时，会发生同样的事情。

Answer 1

这似乎是一个当前未记录的渲染错误，由于某种原因出现在所有平台上。关于它的信息非常少，在HTML5成为官方标准之前，它有望得到关注。

作为解决方法，请勿使用lineTo()，使用多组单行。

Answer 2

假设你有：http://jsfiddle.net/g3Kvw/ 你可以看到它似乎是2px宽。但是如果你改变它来使用fillRect（）而不是lineTo（），那么http://jsfiddle.net/g3Kvw/1/看起来很好。

问题：使用此方法无法绘制非矩形的东西。

但是，如果你将0.5加到每个int坐标（x，y）：http://jsfiddle.net/g3Kvw/3/，你将得到常规线。

我认为这是FF＆amp ;;的某种抗锯齿计算错误。 webkit ...但是我没有在bug跟踪器中找到它，而这个将数字转换为float的“怪异”解决方案，以获得一条实线是相当混乱的。因为使用整数就足够了。