canvas図面のぼかしの問題を解決する

canvasの絵はよく彼がぼんやりしていることに気づいた.この問題を解決するには主に2つの面から着手する.

canvasレンダリングのピクセルを変更する

場合:1画素の線を描くとぼやけて見えなくなり、幅が広くなったようです.ソリューション

var ctx = canvas.getContext('2d');
ctx.translate(0.5, 0.5);

原理:スクリーンの最小単位が画素であることはよく知られています.canvasを十分に大きくすれば、次のように見えます.
各格子は長さと幅が1 pxである.1 px線を描くときに画素の立ち上がり範囲に従うと、標準的な細い線を得ることができます.
しかし残念なことにcanvasの描き方は違います.canvasの各線には無限の細い「中線」があり、線の幅は中線から両側に伸びています.もし私たちがまだ2番目の画素から1本の線を描くと、線の中線は2番目の画素の起点に揃えられ、それから描き始めました.問題は、Canvasの線が中線で両側に伸びているのではなく、どちらかに伸びていることです(例えば、ここでは右側に伸びているだけであれば、私たちの問題はもう問題ではありません).私たちの線は実際には次のように伸びています.
しかし、コンピュータは<1 pxのグラフィックを表示することを許さない.だから折衷して、2つのピクセルを描きました.すると、本来1 pxの線は、2 pxの幅に見える線になります.この問題をどのように解決するかは、線の中の線と画素の中間点を揃えておけばいいということです.
中間点の位置がわかりやすく、0.5 px後ろに移動します.線を描くときはこうすることができます

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.translate(0.5, 0.5);

2.表示スケールを設定ブラウザのwindow変数に1つのデバイスPixelRatioの属性があり、この属性はブラウザが1つの画素をいくつか(通常は2つ)の画素点でレンダリングすることを決定し、例えば、ある画面のデバイスPixelRatioの値が2であると仮定し、100 x 100画素サイズの画像を1枚、この画面の下で、画像の1画素点を2画素点の幅でレンダリングするので、この画面では実際に200 x 200画素の空間を占め、画像の倍に拡大されるため、画像がぼやけてしまいます.**実は案は簡単で、分かりやすいです.実際のサイズの2倍のcanvasを作成し、cssスタイルでcanvasを実際のサイズに限定できます.次に、実装の具体的なコードの例を示します.

var canvas = document.getElementById("canvas")
        context= canvas.getContext("2d");  
    var devicePixelRatio = window.devicePixelRatio || 1;
    var backingStoreRatio = context.webkitBackingStorePixelRatio ||
                        context.mozBackingStorePixelRatio ||
                        context.msBackingStorePixelRatio ||
                        context.oBackingStorePixelRatio ||
                        context.backingStorePixelRatio || 1;
    var ratio = devicePixelRatio / backingStoreRatio;
    canvas.width = canvas.width * ratio;
    canvas.width = canvas.height* ratio;
    context.scale(ratio, ratio);
    ctx.translate(0.5, 0.5);
    ctx.lineWidth = 1;
    ctx.moveTo(2.5, 2);
    ctx.lineTo(98.5, 2);
    ctx.lineTo(98.5, 98);
    ctx.lineTo(2.5, 98);
    ctx.lineTo(2.5, 2);
    ctx.stroke();

ここを見てください
に注目
小さなステーションのプーリに注目してください.小さなステーションは普段の仕事で蓄積された小さなツールです.あなたたちの仕事でも出会うのではないでしょうか.サイトの内容についてもブログの下にコメントできますよ.何か使いたいものがあれば補充してもらいたいし、伝言もできます.