以前の記事Canvas Line Drawingチュートリアルを続けてください
最後に、キャンバスには、下の図に示すように、ぼやけて広く見える1ピクセルの線があることがあると述べました。
そのような線は明らかに私たちが望むものではありません。
この記事の目的は、原則を把握して解決することです。
画面上の最小の表示サイズが1ピクセルであることを誰もが知っています。 1ピクセル未満のものは表示されない場合がありますが、コンピューターは気にしないため、描画しようとします。
実際、結局のところ、ピクセルもユニットです。各ピクセルをはっきりと見るのに十分な大きさのサイズにキャンバスを拡大すると、どうなりますか？それはおそらくこのようなものです：
図に示すように、各ピクセルには開始範囲と終了範囲があり、その範囲は左から始まり、1ピクセルにまたがり、右に停止します。
1つのピクセルラインを描画するときにピクセルの開始範囲と終了範囲に従うと、非常に標準的な細い線が確実に取得されます。次のように：
しかし、残念ながら、キャンバスのラインは異なって描かれています。前の記事では、キャンバスの各ラインには無限に薄い正中線があり、ラインの幅は正中線から両側まで伸びているとすでに述べています。 2番目のピクセルポイントからまだ線を描く場合、ラインの正中線は2番目のピクセルの出発点に近づき、描画を開始し、問題が発生します。拡張後、私たちのラインは実際には次のようなものです。
現時点では別の問題があります。コンピューターでは、グラフィックが1px未満であることを許可していないため、妥協を行いました。両方のピクセルを描画します。
したがって、このようにして、元の1pxラインは幅2pxに見えるラインになります。
障害の理由が見つかります。キャンバスの線は、ピクセルの中間点ではなく、ピクセルの開始点に正中線を整列させます。
それでは、この痛みを伴う問題をどのように解決するのでしょうか？多分何人かの人々はすでに考えています：2つの出発点が異なるので、彼らの出発点を同じようにしましょう！
ラインの中央線をピクセルの中間点に合わせるだけです！
ピクセルの中間点は簡単に見つけることができます。たとえば、2番目のピクセルの中間点は、図の説明によると1.5ピクセルの位置であるため、Xピクセルの中間点は（x-0.5）pxです。
もちろん、それほど厳しくない場合は、x+0.5を使用できます。
それでは、キャンバスで結果を試してみましょう。
ctx.moveto（100.5,100.5）;
ctx.lineto（200.5,100.5）;
ctx.lineto（200.5,200.5）;
ctx.lineto（100.5,200.5）;
ctx.lineto（100.5,100.5）;
ctx.closepath（）;
ctx.linewidth = 1;
ctx.strokestyle = 'rgba（255,0,0,0.5）';
ctx.stroke（）;
そうですよね？
しかし、私たちが線を描くとき、私たちは非常に混乱しているようです。私たちは常にこの憂鬱な0.5を追加しますか？もちろん、ほとんどの時間を保存するために変数を使用しているため、各値に0.5を追加する必要はありません
さらに、LineWidth> 1のラインの場合、心配する必要はありません。この問題は、線の幅が1pxの場合に最も明白であるためです。