电子杂志制作 WWW.YAZINE.COM

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

<!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>