Canvas放大镜效果

点击图片拖动鼠标，即看到放大镜效果

canvas,放大镜

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 5494
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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 = 600;
    canvas.height = 337.5;
    image.src = "/uploads/160301/s1.jpg";
    image.onload = function() {
        scale = image.width / canvas.width;
        offCanvas.width = image.width;
        offCanvas.height = image.height;
        context.drawImage(image, 0, 0, canvas.width, canvas.height);
        offContext.drawImage(image, 0, 0);
    }
}

function drawMagniferCanvas(isShowMagnifer, point) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    if (isShowMagnifer == true) {
        showMagnifer(point);
    }
}

function showMagnifer(point) {
    var r = 100;
    var image_cx = point.x * scale;
    var image_cy = point.y * scale;
    var sx = image_cx - r;
    var sy = image_cy - r;
    var dx = point.x - r;
    var dy = point.y - r;

context.save();
    context.lineWidth = 10;
    context.strokeStyle = "#069";
    context.beginPath();
    context.arc(point.x, point.y, r, 0, Math.PI * 2, false);
    context.stroke();
    context.clip();
    context.drawImage(offCanvas, sx, sy, 2 * r, 2 * r, dx, dy, 2 * r, 2 * r);
    context.restore();
}

编译

CSS

HTML

点击图片拖动鼠标，即看到放大镜效果