P粉5613239752023-07-26 09:08:28
你忘了改變畫布的大小並設定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>