1

私はグラフを描かなければならないプロジェクトに取り組んでいます。すべてが非常に良好ですが、1 つの問題に気付きました。線が奇妙に表示されています。誰かがブラシを水平に保持してグラフを描いているようです。線が下がるとすべて問題ありませんが、線が水平になると、はるかに小さくなります。 ..何が問題なのかわかりません..水平線を描く必要があるときに間違ったグラフを取得し始めたので、助けてください...

私のプロジェクトへのリンクは次のとおりです 。

1枚目の写真で私の問題をはっきりと見ることができます..

コードは次のとおりです。

function drawSignal()
{   
    var canvas = document.getElementById("canvSignal"); 
    if (canvas.getContext) 
    {
        var ctx = canvas.getContext("2d");
            ctx.lineWidth = 3;  
     function Signalas()
        {
   <...>

    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.strokeStyle = "black";

   <...>   

    y=250- Sn[n] ;
    ctx.lineTo(x, y);
    ctx.stroke(x, y);

   <...>

ここにすべてのコードを配置するのは、あまりにも問題が多すぎます..

4

1 に答える 1

0

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

考えられる解決策: 奇数の幅の線を描画する必要がある場合は、線の中心を上下に 0.5 オフセットする必要があります。そうすれば、レンダリングはピクセルの境界で行われ、中央では行われず、端のエッジに残留物のないシャープな線が常に表示されます。

したがって、奇数の線幅に 0.5 を追加して、ポイントが半分の番号になるようにします

ctx.lineTo(x+0.5, y+0.5);
ctx.stroke(x+0.5, y+0.5);

コードの 134 行目と 135 行目をこのように変更したところ、次のような出力が得られました。お役に立てれば

ここに画像の説明を入力

ここを参照してください：

  1. html5 キャンバスで lineWidth=1 が正しく表示されない
  2. HTML5 キャンバスと線幅
  3. キャンバスの線幅
于 2013-05-27T09:24:37.647 に答える