キャンバスの縮尺とキャンバスのサイズにはどのような関係がありますか?

Question

<p>240x157 の png があり、div サイズは 120x88</p><p>そこで、240x157 のキャンバスを作成し、png を貼り付けました。 </p><p>div のサイズは png よりも小さいですが、div にはスクロール バーがあり、ドラッグ バーを使用して画像全体を表示できます。これは完璧です。 </p>gt;

<コード>gt;<コード><コード>

<p><br /></p> <pre class="brush:js;toolbar:false;">var ctx = $('canvas')[0].getContext('2d'); console.log("テスト") var char = 新しい画像(); char.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town,_c._1900.jpg?dl=0"; char.onload = () => { ctx.clearRect(0, 0,240,157); ctx.drawImage(character,0,0,240,157); }</pre> <pre class="brush:css;toolbar:false;">#whole{ 境界線:1 ピクセルの実線; 幅:120ピクセル; 高さ:78ピクセル; オーバーフロー:スクロール; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</スクリプト> <div id="全体"> <canvas id="test" width="240px" height="157px"></canvas> </div></pre> <p><br /></p> <p>私の最終的な目標は、ユーザーが比率を変更することです。画像が div より大きい場合、Photoshop などのようにスクロール バーが表示されます。 </p><p>そこで、1/2 スケールをテストしたところ、画像全体が 129 x78</p> エリアで正常に表示されることがわかりました。 </p><p>なぜこれが起こるのですか?</p><p>私の理解では、キャンバスサイズが 240x157 で比率が 1/2 の場合、120x78 が表示されるはずです。なぜ画像だけが表示されるのでしょうか?縮小しますか? キャンバス自体ではなく?</p><p><code></code><code></code></p> <p><br /></p> <pre class="brush:js;toolbar:false;">var ctx = $('canvas')[0].getContext('2d'); console.log("テスト") var char = 新しい画像(); char.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town,_c._1900.jpg?dl=0"; ctx.scale(1/2,1/2) // ここに追加します。 char.onload = () => { ctx.clearRect(0, 0,240,157); ctx.drawImage(character,0,0,240,157); }</pre> <pre class="brush:css;toolbar:false;">#whole{ 境界線:1 ピクセルの実線; 幅:120ピクセル; 高さ:78ピクセル; オーバーフロー:スクロール; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</スクリプト> <div id="全体"> <canvas id="test" width="240px" height="157px"></canvas> </div></pre> <p><br /></p>

Answer 1

キャンバスのサイズを変更し、スクロールバーが消えるように overflow:auto を設定するのを忘れました:

リーリー リーリー リーリー