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

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

    <div style="width:1000px; height: 600px; " id="canvas_size">
        <canvas id="canvas" style="width: 100%; height: 100%; background-color: #eee">您的浏览器不支持H5画布属性</canvas>
    <script type="text/javascript">
        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();
    </script>
</div>

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

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

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

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

<div style="width:1000px; height: 600px; " id="canvas_size">
    <canvas id="canvas" width="1000px" height="600px" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas>
    <script type="text/javascript">
        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();

    </script>
</div>

したがって、キャンバスのサイズを設定するには、キャンバスに付属の幅と高さの属性を使用します。これがキャンバスの実際のサイズです。ネットで解決する方法もありますが、面倒そうなので試しませんでした。今後は固定サイズにした方が良いでしょう。このようにカスタマイズする方法は、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;"><canvas width="1000px" height="600px" スタイル="background-color: #eee">お使いのブラウザは H5 Canvas 属性</canvas></span><span style="font-size: 16px;"><canvas width="1000px" height="600px" style="background-color: #eee">您的浏览器不支持H5画布属性</canvas></span>をサポートしていません。js を使用して適応的に設定してください。

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