html5 Canvas描画チュートリアル(3) ～canvas_html5チュートリアルスキルで1ピクセルの線が滲む理由～

前回の記事からの続きです キャンバスの線画チュートリアル
前回説明したように、キャンバスには以下のように 1 ピクセルの線がぼやけて広く見えることがあります。

そのような行は明らかに私たちが望んでいることではありません。
この記事の目的は、原理を明らかにし、それを解決することです。
画面上の最小表示サイズは 1 ピクセルであることは誰もが知っていますが、1 ピクセルより小さいものは表示されないことがありますが、コンピューターは気にせず、それを描画しようとします。
実際のところ、ピクセルも結局のところ単位です。各ピクセルがはっきり見えるほど大きなサイズにキャンバスを拡大するとどうなるでしょうか?おそらく次のようになります:

図に示すように、各ピクセルには開始範囲と終了範囲があり、その範囲は左から始まり、1 ピクセルに広がり、右で終わります。
1 ピクセルの線を描画するときにピクセルの開始範囲と終了範囲に従うと、非常に標準的な細い線が得られます。以下のように:

しかし、残念ながらキャンバスの線の描き方は異なります。 前回の記事でも述べたように、キャンバスの各線には無限に細い「中心線」があり、その線の幅は中心線から両方に伸びています。側面。それでも 2 番目のピクセルから線を描画すると、線の中心線が 2 番目のピクセルの開始点に位置合わせされてから描画を開始すると、キャンバスの線が両側に伸びてしまうという問題が発生します。中心線から特定の側に延長するのではなく (たとえば、ここで右側にのみ延長する場合、問題は問題ではなくなります)、延長後の線は実際には次のようになります:

この時点では別の問題がありました。コンピューターでは 1 ピクセルより小さいグラフィックスが許可されていないため、彼は妥協して、両方のピクセルを描画しました。
このようにして、元の 1px の線が 2px の幅に見える線になります。
失敗の理由が判明しました。キャンバス内の線がピクセルの中心点ではなく、ピクセルの開始点に中心線を合わせていました。
それでは、この厄介な問題をどのように解決すればよいでしょうか? 「スタート地点が違うからスタート地点を同じにしよう！」と思った人もいるかもしれません。
線の中心線をピクセルの中点に揃えるだけです。
ピクセルの中点は簡単に見つけられます。たとえば、図の説明によれば、2 番目のピクセルの中点は 1.5 ピクセルに位置します。すると、x ピクセルの中点は (x-0.5) になります。 )px。


もちろん、それほど厳密ではない状況では、x 0.5 を使用することもできます。
それでは、研究結果をキャンバス上で試してみましょう。

コードをコピー

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

ctx.moveTo(100.5, 100.5);
ctx.lineTo(200.5,200.5);
ctx.lineTo(100.5,100.5) ;
ctx.closePath();
ctx.ストロークスタイル = 'rgba(255,0,0,0.5)'; >

そうですか？
しかし、この憂鬱な 0.5 を毎回追加する必要があるのでしょうか?もちろんそうではありません。ほとんどの場合、値を保存するために変数を使用するため、各値に 0.5 を加算する必要はありません

さらに、lineWidth>1 の行については、それについて心配する必要はありません。線幅が 1px の場合にのみ、この問題が最も顕著になります。