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>




阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huangyibin628/article/details/47951317
个人分类: HTMl5 CSS3
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭