javascript - 为什么 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()，而是使用多组单行。