canvas放大镜效果-我爱编程

当前位置：: 首页; 文章; 前端
详情

canvas放大镜效果

前端
三生万物
0

效果（点击放大）

完整代码

<!DOCTYPE html>
<html>

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

<body>
    <canvas style="display:block;margin:0 auto;">
        您的浏览器尚不支持canvas
    </canvas>
    <canvas 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 = "http://ziyuan.fenxianglu.cn/images/car/1.jpg"
        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>

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。