离屏Canvas——制作放大镜效果

最新推荐文章于 2024-06-26 04:13:17 发布

一喵呜

最新推荐文章于 2024-06-26 04:13:17 发布

阅读量5.2k

点赞数 1

分类专栏： HTMl5 CSS3

本文链接：https://blog.csdn.net/html5_/article/details/47950745

版权

本文介绍了如何利用HTML5的离屏Canvas技术来创建一个动态的放大镜效果，通过调整参数值来优化视觉体验。

摘要由CSDN通过智能技术生成

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

    <canvas id="offCanvas" style="display: none">
    </canvas>

    <script>
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")

        var offCanvas = document.getElementById("offCanvas")
        var offContext = offCanvas.getContext("2d")

        var image = new Image()
        var isMouseDown = false
        var scale

        window.onload = function(){

            canvas.width = 1152
            canvas.height = 768

            image.src = "img-lg.jpg"
            image.onload = function(){

                offCanvas.width = image.width
                offCanvas.height = image.height
                scale = offCanvas.width / canvas.width

                context.drawImage( image , 0 , 0 , canvas.width , canvas.height )
                offContext.drawImage( image , 0 , 0 )
            }
        }

        function windowToCanvas( x , y ){
            var bbox = canvas.getBoundingClientRect()
            return {x:x-bbox.left , y:y-bbox.top}
        }

        canvas.onmousedown = function(e){
            e.preventDefault()
            isMouseDown = true
            point = windowToCanvas( e.clientX , e.clientY )
            console.log( point.x , point.y )
            drawCanvasWithMagnifier( true , point )
        }