canvas做的放大镜效果

效果图

<a href="http://s5.51cto.com/wyfs02/M00/8D/1B/wKiom1iGt_PzBKPYAAjVQOta_Us722.png-wh_500x0-wm_3-wmp_4-s_1419688800.png" target="_blank"></a>

html结构

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta charset="utf-8"&gt;

&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;

&lt;title&gt;Canvas&lt;/title&gt;

&lt;link rel="stylesheet" href=""&gt;

&lt;style type="text/css" media="screen"&gt;

body{

background-color: #000;

}

#canvas{

display: block;

margin: 0 auto;

border: 1px solid #aaa;

.range-style{

margin: 20px auto;

width: 800px;

.watermark-canvas-style{

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

&lt;canvas id="offCanvas" style="display:none"&gt;

&lt;/body&gt;

&lt;/html&gt;

js脚本

&lt;script type="text/javascript" charset="utf-8"&gt;

var canvas = document.getElementById("canvas");

var offCanvas = document.getElementById("offCanvas");

var context = canvas.getContext("2d");

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. = function(e){

e.preventDefault();

isMouseDown = true;

var point = windowToCanvas(e.clientX,e.clientY);

drawCanvasWithMagnifier(true,point);

isMouseDown = false;

drawCanvasWithMagnifier(false);

if (isMouseDown == true) {

function drawCanvasWithMagnifier(isShowMagnifier,point){

context.clearRect(0,0,canvas.width,canvas.height);

if (isShowMagnifier == true) {

drawMagnifier(point);

function drawMagnifier(point){

var mr = 200;

var imageLG_cx = point.x * scale;

var imageLG_cy = point.y * scale;

var sx = imageLG_cx - mr;

var sy = imageLG_cy - mr;

var dx = point.x - mr;

var dy = point.y - mr;

context.save();

context.lineWidth = 10;

            context.strokeStyle = "#069";

context.beginPath();

            context.arc( point.x , point.y , mr , 0 , Math.PI*2 , false );

            context.stroke();

            context.clip();

            context.drawImage( offCanvas , sx , sy , 2*mr , 2*mr , dx , dy , 2*mr , 2*mr );

            context.closePath();

            context.restore();

&lt;/script&gt;

本文转自  素颜猪  51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1893994