Canvas に描画した画像がぼやける問題を解決するにはどうすればよいですか?

CanvasはHTML5の新しいタグで、キャンバスのデフォルトサイズは300x150です。描画キャンバスのサイズをカスタマイズするとき、つまり、スタイルを使用して高さと幅を設定するとき、たとえば

    ef029a31833e82074e2841e311304802
        c1f09087ca97c8236460a3898c8e270c您的浏览器不支持H5画布属性c2caaf3fc160dd2513ce82f021917f8b
    8019067d09615e43c7904885b5246f0a
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.arc(120, 75, 20, 0, Math.PI * 2, false);
        ctx.fillStyle = "#000";
        ctx.fill();
    2cacc6d41bbb37262a98f745aa00fbf0
16b28748ea4df4d9c2150843fecfba68

はキャンバス全体を引き伸ばすことと同等であるため、描画されたグラフィックスがぼやけます。

円の端がぼやけて楕円になっているのがわかりますか？これは、キャンバスが幅 300 ピクセル、高さ 150 ピクセルのデフォルト サイズのままですが、スタイルを使用してキャンバスが強制的に 1000x600 に引き伸ばされるためです。幅は3.33倍、高さは4倍に拡大され、楕円になります。幅を1200に変更すると丸くなります。

そのため、スタイルでサイズを設定することはできません。高さを設定するには、キャンバスの幅と高さのプロパティを使用する必要があります。以下のコードを見てください。

円を描画するためのパラメータも変更されていることに注意してください

ef029a31833e82074e2841e311304802
    2f793f625f21a6d6ac9a0eacb892e6e3您的浏览器不支持H5画布属性c2caaf3fc160dd2513ce82f021917f8b
    8019067d09615e43c7904885b5246f0a
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.arc(500, 300, 200, 0, Math.PI * 2, false);
        ctx.fillStyle = "#000";
        ctx.fill();

    2cacc6d41bbb37262a98f745aa00fbf0
16b28748ea4df4d9c2150843fecfba68

したがって、キャンバスのサイズを設定するには、キャンバスに付属の幅と高さの属性を使用します。これがキャンバスの実際のサイズです。ネットで解決する方法もありますが、面倒そうなので試しませんでした。今後は固定サイズにした方が良いでしょう。このようにカスタマイズする方法は、divを入れてjsで幅を取得するか、画面の幅と高さを取得してキャンバスの値を設定するだけです。コードは以下のように表示されます。

<div style="width:1000px; height: 600px; " id="canvas_size"><canvas id="canvas" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas>        <script type="text/javascript">var canvas = document.getElementById("canvas");var canvas_size = document.getElementById("canvas_size");//获取divvar ctx = canvas.getContext("2d");canvas.width = canvas_size.offsetWidth;//设置宽canvas.height = canvas_size.offsetHeight;//设置高ctx.arc(500, 300, 200, 0, Math.PI * 2, false);ctx.fillStyle = "#000";ctx.fill();</script>    </div>

結果は上の写真と同じです。ご自身で試してみてください。

概要

実際のキャンバスサイズになるように、キャンバスの幅と高さを独自の幅と高さで記述する必要があります、

<span style="font-size: 16px;">5b2380039370c5d0451cd23456d341f8お使いのブラウザは H5 Canvas 属性c2caaf3fc160dd2513ce82f021917f8b</span><span style="font-size: 16px;">17a80cc1fd4e4aef2bcbf8646e33797c您的浏览器不支持H5画布属性c2caaf3fc160dd2513ce82f021917f8b</span>をサポートしていません。js を使用して適応的に設定してください。

以上がCanvas に描画した画像がぼやける問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。