12

这种情况很难解释，我用一张图来说明： 像素变亮

创建的第一个形状内的那些像素会变亮。用黑色清除屏幕，绘制红色和绿色框，然后绘制路径。到目前为止，我发现的唯一解决方法是将框的线宽设置为 2 像素，原因如下所述。

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

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();编辑：为了澄清，当从正在绘制的路径中省略时，也会发生同样的事情。

4

2 回答 2

1

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

作为一种解决方法，不要使用lineTo()'s，使用多组单行。

于 2012-08-01T21:30:19.897 回答
0

假设你有：http://jsfiddle.net/g3Kvw/ 你可以看到它似乎是 2px 宽。但是，如果您将其更改为使用 fillRect() 而不是 lineTo()，您将拥有看起来不错的http://jsfiddle.net/g3Kvw/1/ 。

问题：您将无法使用此方法绘制不是矩形的东西。

但是，如果您将 0.5 与每个 int 坐标 (x,y) 相加：http: //jsfiddle.net/g3Kvw/3/您将得到常规行。

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

于 2012-07-18T16:04:27.323 回答