国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

<p>我有240x157 png，和div大小為120x88</p><p>所以，我制作了240x157的畫布并粘貼png。</p><p>div的大小比png小，但是div有滾動條，我可以用拖拽條看到整個圖片。這是完美的。</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 = () =&gt; { ctx.clearRect(0, 0,240,157); ctx.drawImage(chara,0,0,240,157); }</pre> <pre class="brush:css;toolbar:false;">#whole{ border:1px solid; width:120px; height:78px; overflow:scroll; }</pre> <pre class="brush:html;toolbar:false;">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div id="whole"&gt; &lt;canvas id="test" width="240px" height="157px"&gt;&lt;/canvas&gt; &lt;/div&gt;</pre> <p><br /></p> <p>我的最終目標是通過用戶改變比例，當圖片大于div時，會出現(xiàn)滾動條，如photoshop等。</p><p>所以，我測試了1/2的比例，看到整個圖片在129 x78</p><p>看起來成功了，但是仍然有滾動條，它沒有滾動必要的區(qū)域。</p><p>為什么會這樣呢?</p><p>在我的理解中，當畫布尺寸為240x157，比例為1/2時，應該出現(xiàn)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("test") var chara = new Image(); chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0"; ctx.scale(1/2,1/2) // adding here. chara.onload = () =&gt; { ctx.clearRect(0, 0,240,157); ctx.drawImage(chara,0,0,240,157); }</pre> <pre class="brush:css;toolbar:false;">#whole{ border:1px solid; width:120px; height:78px; overflow:scroll; }</pre> <pre class="brush:html;toolbar:false;">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div id="whole"&gt; &lt;canvas id="test" width="240px" height="157px"&gt;&lt;/canvas&gt; &lt;/div&gt;</pre> <p><br /></p>

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>