4

黒の背景に白の線のグリッドを描画しようとしています。

下の3本の水平線は、再描画するまで色あせているように見えますが、なぜこれが起こっているのか理解できません。誰かがこれを以前に見たことがありますか、および/または私が間違っていることを知っていますか？

4

3 に答える 3

11

これは、線がその上にあるすべてのピクセル上に描画されるためです (キャンバス上の位置は float です)。キャンバス上に JavaScript で正確な縦線または横線を描画する場合は、半分の整数にすることをお勧めします。

図を参照してください: 最初の水平線は y 位置 1 で描かれています。この線はぼやけて幅が広いです。2 番目の水平線は、y 位置 4.5 で描画されました。薄くて精密です。

ここに画像の説明を入力

たとえば、コードでは、水平線のループを次のように変更すると、良い結果が得られました。

                // Horizontal lines
                for (var i = 1; i < objCanvas.height / intGridWidth; i++)
                {
                    objContext.strokeStyle = "white";
                    var y = Math.floor(i*intGridWidth)+0.5
                    objContext.moveTo(0, y);
                    objContext.lineTo(objCanvas.width, y);
                    objContext.stroke();
                }

これは、非常に細くてきれいな線でそれを示すフィドルです:

http://jsfiddle.net/dystroy/7NJ6w/

線がその上にあるすべてのピクセルに描画されるという事実は、正確に 1 ピクセルの幅の水平線を描画する唯一の方法は、中央をターゲットにすることであることを意味します。私は通常、キャンバスベースのアプリケーションにこの種のユーティリティ関数を持っています:

function drawThinHorizontalLine(c, x1, x2, y) {
    c.lineWidth = 1;
    var adaptedY = Math.floor(y)+0.5;
    c.beginPath();
    c.moveTo(x1, adaptedY);
    c.lineTo(x2, adaptedY);
    c.stroke();
}

もちろん、見栄えの良いページを作成するには、縦線にもそれを行う方がよいでしょう。

于 2012-04-30T07:29:00.623 に答える
0

私には色褪せていないように見えます。お使いの OS や PC に問題があり、図面を正しくレンダリングできない可能性があります。Win 7 で Chrome 20 を使用しています。テストしてみてください。

于 2012-04-29T16:23:15.167 に答える
0

objContext.lineWidth次のように定義する必要があります。

objContext.lineWidth = 2;

ただし、最後の行がフェードする理由はわかりません。http://jsfiddle.net/jSCCY/を参照してください

于 2012-04-29T16:37:34.180 に答える