Canvas 이미지 배율 조정

3152 단어
<body>
<canvas id="canvas"></canvas>
<input type="range" id="scale_range" min="0.5" max="3" step="0.01" value="1.0">
<script> slider = document.getElementById("scale_range"); canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); var image = new Image(); window.onload = function(){ canvas.width = 500; canvas.height = 500; image.src = "/a.png"; var scale = slider.value; image.onload = function(){ drawByScale(scale); slider.onmousemove = function(){ scale = slider.value; drawByScale(scale); } } } function drawByScale(scale){ var imageWidth = canvas.width*scale; var imageHeight = canvas.height*scale; //var sx = imageWidth/2-canvas.width/2; //var sy = imageHeight/2-canvas.height/2; var dx = canvas.width/2-imageWidth/2; var dy = canvas.height/2-imageHeight/2; context.clearRect(0,0,canvas.width,canvas.height); context.drawImage(image,dx,dy,imageWidth,imageHeight); } </script>
</body>

좋은 웹페이지 즐겨찾기