javascript - 为什么lineTo()会更改内部像素？

这种情况很难解释，所以让我用图片说明一下:

所创建的第一个形状内的那些像素变亮。用黑色清除屏幕，绘制红色和绿色框，然后绘制路径。到目前为止，我发现的唯一解决方法是将框的线宽设置为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();时，会发生相同的事情。

最佳答案

似乎这是一个当前未记录的渲染错误，由于某种原因，该错误出现在所有平台上。那里的信息很少，希望在HTML5成为正式标准之前会得到关注。

解决方法是，不要使用lineTo()，而应使用多组单行。

关于javascript - 为什么lineTo()会更改内部像素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11512861/