Canvas——滑桿操控圖片放大縮小

一喵嗚發表於2015-08-24
Canvas
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="background: black;">

    <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
    您的瀏覽器尚不支援canvas
    </canvas>
    <input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:800px"/>

    <script>
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        var slider = document.getElementById("scale-range")
        var image = new Image()

        window.onload = function(){

            canvas.width = 1152
            canvas.height = 768

            var scale = slider.value
            image.src = "img-lg.jpg"
            image.onload = function(){
                drawImageByScale( scale )

//                slider.onchange = function(){
//                    scale = slider.value
//                    drawImage( image , scale )
//                }

                slider.onmousemove = function(){
                    scale = slider.value
                    drawImageByScale( scale )
                }
            }


        }

        function drawImageByScale( scale ){

            var imageWidth = 1152 * scale
            var imageHeight = 768 * scale

            //var sx = imageWidth / 2 - canvas.width / 2
            //var sy = imageHeight / 2 - canvas.height / 2

            //context.drawImage( image , sx , sy , canvas.width , canvas.height , 0 , 0 , canvas.width , canvas.height )
            x = canvas.width /2 - imageWidth / 2
            y = canvas.height / 2 - imageHeight / 2

            context.clearRect( 0 , 0 , canvas.width , canvas.height )
            context.drawImage( image , x , y , imageWidth , imageHeight )
        }


    </script>
</body>
</html>




相關文章