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()おそらくアルファ値をいじっていますか？どんな助けでも大歓迎です。

編集：明確にするために、sctx.closePath();描画されているパスから省略された場合も同じことが起こります。

4

2 に答える 2

1

これは、何らかの理由ですべてのプラットフォームで発生する、現在文書化されていないレンダリング バグであるかのように思われます。HTML5 に関する情報はほとんどありませんが、HTML5 が正式な標準になる前に対応されることを願っています。

回避策として、's を使用せずlineTo()、単一行の複数のセットを使用してください。

于 2012-08-01T21:30:19.897 に答える
0

あなたが持っているとしましょう：http：//jsfiddle.net/g3Kvw/ ご覧のとおり、幅は2pxのようです。ただし、lineTo（）の代わりにfillRect（）を使用するように変更すると、http：//jsfiddle.net/g3Kvw/1/が見栄えが良くなります。

問題：この方法では、長方形以外のものを描画することはできません。

ただし、すべてのint座標（x、y）に0.5を合計すると、http：//jsfiddle.net/g3Kvw/3/通常の線が得られます。

これはFFとWebkitのアンチエイリアシング計算のバグのようなものだと思います...しかし、バグトラッカーでは見つかりませんでした。実線を取得するために、数値を浮動小数点数に変換するこの「奇妙な」ソリューションは次のとおりです。かなり紛らわしい。整数を使用するだけで十分なはずだからです。

于 2012-07-18T16:04:27.323 に答える