canvas放大镜效果

canvas放大镜效果 您的浏览器尚不支持canvas
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas放大镜效果</title>
</head>

<body>
    <canvas id="canvas" style="display:block;margin:0 auto;">
        您的浏览器尚不支持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 = 304
        canvas.height = 190

        image.src = "https://bilubilu.cn/wp-content/uploads/2021/12/7887b9e17e25.jpeg"
        image.onload = function() {
            offCanvas.width = image.width // 原始图片的宽度 
            offCanvas.height = image.height // 原始图片的高度
            scale = offCanvas.width / canvas.width // 原始图片的宽度与canvas画布的宽度比

            context.drawImage(image, 0, 0, canvas.width, canvas.height) // 绘制图片 设置宽高
            offContext.drawImage(image, 0, 0) // 绘制图片 不设置宽 
        }
    }

    // 获取相对于canvas画布的x,y坐标
    function windowToCanvas(x, y) {
        var bbox = canvas.getBoundingClientRect() // getBoundingClientRect()用来获取canvas这个矩形对象的属性 left,top, right, bottom, width, height
        return { x: x - bbox.left, y: y - bbox.top }
    }

    // 鼠标按下,进行放大绘制
    canvas.onmousedown = function(e) {
        e.preventDefault()
        isMouseDown = true
        point = windowToCanvas(e.clientX, e.clientY)
        drawCanvasWithMagnifier(true, point)
    }

    // 鼠标抬起,停止放大绘制
    canvas.onmouseup = function(e) {
        e.preventDefault()
        isMouseDown = false
        drawCanvasWithMagnifier(false)
    }

    // 鼠标离开,停止放大绘制
    canvas.onmouseout = function(e) {
        e.preventDefault()
        isMouseDown = false
        drawCanvasWithMagnifier(false)
    }

    // 鼠标移动,实时的进行放大绘制
    canvas.onmousemove = function(e) {
        e.preventDefault()
        if (isMouseDown == true) {
            point = windowToCanvas(e.clientX, e.clientY)
            drawCanvasWithMagnifier(true, point)
        }
    }

    // 用放大镜绘制
    function drawCanvasWithMagnifier(isShowMagnifier, point) {
        context.clearRect(0, 0, canvas.width, canvas.height)
        context.drawImage(image, 0, 0, canvas.width, canvas.height)
        if (isShowMagnifier == true) {
            drawMagnifier(point)
        }
    }

    // 放大镜绘制函数
    function drawMagnifier(point) {
        var mr = 50 // 半径

        var imageLG_cx = point.x * scale // 当前坐标点x放大scale倍
        var imageLG_cy = point.y * scale // 当前坐标点y放大scale倍

        var sx = imageLG_cx - mr // 从sx坐标点,开始裁切x轴图片
        var sy = imageLG_cy - mr // 从sy坐标点,开始裁切y轴图片

        var dx = point.x - mr // 在canvas中绘制裁切后的图片,然后在x轴的dx坐标绘制
        var dy = point.y - mr // 在canvas中绘制裁切后的图片,然后在y轴的dy坐标绘制

        context.save() // 保存以前的状态

        context.lineWidth = 5 // 描边宽度
        context.strokeStyle = "#fff" // 描边颜色

        context.beginPath() // 开始路径
        context.arc(point.x, point.y, mr, 0, Math.PI * 2, false) // 绘制圆 arc(圆心坐标,半径,开始弧度,结束弧度,顺时针)
        context.stroke() // 描边
        context.clip() // 裁切圆形区域 
        context.drawImage(offCanvas, sx, sy, 2 * mr, 2 * mr, dx, dy, 2 * mr, 2 * mr) // 在圆形区域内绘制放大后的区域图
        context.restore() // 恢复到以前的状态
    }
    </script>
    </script>
</body>

</html>
------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片