Apakah hubungan antara skala kanvas dan saiz kanvas?

Question

<p>Saya mempunyai png 240x157 dan saiz div ialah 120x88</p><p>Jadi, saya membuat kanvas 240x157 dan menampal png. </p><p>Saiz div adalah lebih kecil daripada png, tetapi div mempunyai bar skrol dan saya boleh menggunakan bar seret untuk melihat keseluruhan imej. Ini adalah sempurna. </p><p><kod></kod><kod></kod></p> <p><br /></p> <pre class="brush:js;toolbar:false;">var ctx = $('canvas')[0].getContext('2d'); console.log("ujian") var chara = Imej baharu(); chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0"; chara.onload = () => ctx.clearRect(0, 0,240,157); ctx.drawImage(chara,0,0,240,157); }</pre> <pre class="brush:css;toolbar:false;">#whole{ sempadan:1px pepejal; lebar: 120px; ketinggian:78px; limpahan:scroll; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</skrip> <div id="keseluruhan"> <canvas id="test" width="240px" height="157px"></canvas> </div></pra> <p><br /></p> <p>Matlamat utama saya adalah untuk menukar skala oleh pengguna, dan apabila imej lebih besar daripada div, bar skrol akan muncul, seperti photoshop, dsb.

P粉621033928478 hari yang lalu524

Answer 1

Anda terlupa untuk mengubah saiz kanvas dan menetapkan limpahan:auto supaya bar skrol hilang:

const canvas = $('canvas')[0];

var ctx = canvas.getContext('2d');
console.log("test")

var chara = new Image();
chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0";

$zoom.addEventListener('input', () =>{

  const zoom = $zoom.value * .5;

  canvas.width = 240 * zoom;
  canvas.height = 157 * zoom;

  ctx.scale(zoom,zoom) // adding here.

  ctx.clearRect(0, 0,240,157);
  ctx.drawImage(chara,0,0,240,157);


});


chara.onload = () => { 
      ctx.clearRect(0, 0,240,157);
      ctx.drawImage(chara,0,0,240,157);

 }

#whole{
  border:1px solid;
  width:120px;
  height:78px;
  overflow:auto;
  
}
canvas{
margin:0;
display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="$zoom" type="range" min="1" max="10" value="2">
<div id="whole">
<canvas id="test" width="240px" height="157px"></canvas>
</div>