canvas实现滚动条缩放图片的demo

ゝ一纸荒年。 2022-06-14 02:37 142阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body style="background: black;">
        <canvas id="myCanvas" style="display: block;border: 10px solid #aaa;margin: 0 auto;">
            你的浏览器不支持canvas
        </canvas>
        <input type="range" id="scale_range" min="0.5" max="3.0" value="1.0" step="0.01" style="display: block;margin: 20px auto;width: 800px;">
    
    <script>
        var myCanvas = document.getElementById("myCanvas");
        var context = myCanvas.getContext("2d");
        var slider = document.getElementById("scale_range");
        var image = new Image();
    
        window.onload = function (){
    
            myCanvas.width = 300;
            myCanvas.height = 200;
    
            var scale = slider.value;
    
            image.src = '1.jpg';
    
            image.onload = function () {
    
               // context.drawImage(image,750,750,200,200,0,0,800,800);
                drawImageByScale(scale);
                slider.onmousemove = function () {
                    scale = slider.value;
                    drawImageByScale(scale);
                }
    
            }
    function drawImageByScale(scale) {
        var imageWidth = 300*scale;
        var imageHeight = 200*scale;
    
       // var sx = imageWidth / 2 - myCanvas.width / 2;
        //var sy = imageHeight /2 - myCanvas.height / 2;
    
        var dx = myCanvas.width / 2 - imageWidth / 2;
        var dy = myCanvas.height /2 - imageHeight / 2;
    
        context.clearRect(0,0,myCanvas.width,myCanvas.height);
        context.drawImage(image,dx,dy,imageWidth,imageHeight);
    
       // context.drawImage(image,sx,sy,myCanvas.width,myCanvas.height,0,0,myCanvas.width,myCanvas.height);
    }
    
        }
    </script>
    </body>
    </html>