Welche Beziehung besteht zwischen Leinwandgröße und Leinwandgröße?

Question

<p>Ich habe 240 x 157 PNG und die Div-Größe beträgt 120 x 88</p><p>Also habe ich eine 240 x 157 große Leinwand erstellt und das PNG eingefügt. </p><p>Die Größe des Div ist kleiner als die des PNG, aber das Div verfügt über eine Bildlaufleiste, und ich kann die Ziehleiste verwenden, um das gesamte Bild anzuzeigen. Dies ist perfekt. </p><p><code></code><code></code></p> <p><br /></p> <pre class="brush:js;toolbar:false;">var ctx = $('canvas')[0].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"; chara.onload = () => ctx.clearRect(0, 0,240,157); ctx.drawImage(chara,0,0,240,157); }</pre> <pre class="brush:css;toolbar:false;">#whole{ Grenze:1px fest; Breite: 120 Pixel; Höhe:78px; Überlauf: scrollen; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</script> <div id="whole"> <canvas id="test" width="240px" height="157px"></canvas> </div></pre> <p><br /></p> <p>Mein ultimatives Ziel ist es, den Maßstab durch den Benutzer zu ändern. Wenn das Bild größer als das Div ist, wird eine Bildlaufleiste angezeigt, wie bei Photoshop usw.

P粉621033928566 Tage vor602

Answer 1

你忘了改变画布的大小并设置overflow:auto，这样滚动条就会消失:

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>