コメント：最後に、キャンバスにはぼやけて広く見える1ピクセルのラインがあることがあると述べました。そのような線は明らかに私たちが望むものではありません。この記事の目的は、原則を把握して解決することです。興味のある友達はもっと学ぶことができます。
以前の記事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の場合に最も明白であるためです。