キャンバスに線を描画しますが、最後の線は色あせします

Question

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

私がそれらを再描画するまで、下の3本の水平線がぼやけているように見えます。なぜこれが起こっているのかわかりません。これを前に見た人、私が間違っていることを知っている人はいますか？

Answer 1

これは、実際の線がキャンバス上にあるすべてのピクセルに描画されているためです（キャンバスの位置合わせは浮動小数点型です）。あなたがキャンバス上でjavascriptで正確な縦線または横線を描画したいときは、それらを半分のintにするのがよいでしょう。

図を参照してください。最初の水平線はy位置1で描画されました。この線はぼやけて広がっています。 2番目の水平線は、4.5のy位置で描かれています。それは薄く正確です。あなたのコードでたとえば

、私はこれまで、あなたの水平線のループを変更することで、良い結果を持っていた：

   // 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(); 
       } 

はここで非常に薄く、きれいなラインでそれを実証フィドルです：

これは終わっているすべてのピクセルに線が描かれているという事実は、d生の水平線は、ちょうど1ピクセルの幅で中央を対象とします。私は通常私のキャンバスベースのアプリケーションでutilの機能のこの種を持っている：もちろん

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(); 
} 

は、あなたがより良い格好良いページを持つことが、あまりにも縦のラインのためにそれを行うだろう。

Answer 2

私はぼやけて見えません。おそらく、あなたのOSやPCと関係があるかもしれませんが、それは描画を適切に描画できません。私はWin 7でChrome 20を使用しています。試してみてください。

Answer 3

あなたはこのようなobjContext.lineWidthを定義する必要があります。最後の行はいえ薄れますなぜ

objContext.lineWidth = 2; 

私はよく分かりません。 を参照してください。http://jsfiddle.net/jSCCY/