キャンバス描画の解像度が拡大され、ぼやけた状態になる

まず、キャンバスの幅と高さを理解しましょう

canvas.width はキャンバスの大きさ、canvas.style.width はブラウザでレンダリングされたキャンバスの大きさです。

最初の問題：キャンバスの高さと幅

キャンバスの幅と高さは、canvasタグで設定する必要があります。cssスタイルで設定した場合、キャンバスはデフォルトサイズの幅：300px、高さ：150pxで表示され、うまくいきません。

Paste this at the beginning of the code

canvas タグで直接設定する以外に、描画中に設定することもできます。

# -*- coding:utf-8 -*-

第二の問題：描画された図形が拡大表示され、画像がぼやける

これは、デバイスに依存しないピクセルと携帯電話の物理的なピクセルとの間に矛盾があるためです。デバイスピクセル比＝物理ピクセル／デバイス独立ピクセルであり、ほとんどの携帯電話のデバイスピクセル比は2であるため、100pxの画像を200pxに配置しなければ正しく表示されないことになります

devicePixelRatio を使用すると、デバイスのピクセル比率を取得することができ、それを取得すると、グラフィックスのスケーリングを制御することができます。

scale = window.devicePixelRatio;

先ほど述べたように、canvas.style.width はブラウザが描画するキャンバスのサイズなので、キャンバスに絵を正しく鮮明に表示するには、以下のように style.width と style.height を正しく設定し、単位の追加に注意する必要があるのです。

canvas.style.width = canvas.width / scale + 'px';
canvas.style.height= canvas.height/ scale + 'px';

上記では、canvas の幅を 324 に設定していますが、style.width を設定しない場合、描画は 2 倍に拡大されて表示されます。

キャンバスの描画が拡大され、ぼやける問題の解決方法についての説明は以上です。canvasの描画が拡大されたり、ぼやけたりする問題については、Script Houseの過去の記事を検索していただくか、以下の関連記事を引き続きご覧ください。