效果图

wKiom1iGt_PzBKPYAAjVQOta_Us722.png-wh_50

html结构

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Canvas</title>

<link rel="stylesheet" href="">

<style type="text/css" media="screen">

body{

background-color: #000;

}


#canvas{

display: block;

margin: 0 auto;

border: 1px solid #aaa;

}


.range-style{

display: block;

margin: 20px auto;

width: 800px;

}


.watermark-canvas-style{

display: block;

margin: 0 auto;

border: 1px solid #aaa;

}

</style>

</head>

<body>

<canvas id="canvas"></canvas>

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

</body>

</html>

js脚本

<script type="text/javascript" charset="utf-8">

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);

}



canvas. = function(e){

e.preventDefault();

isMouseDown = false;


drawCanvasWithMagnifier(false);

}



canvas. = function(e){

e.preventDefault();

isMouseDown = false;


drawCanvasWithMagnifier(false);

}



canvas. = function(e){

e.preventDefault();

if (isMouseDown == true) {

var 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 = 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();

}

</script>

QQ截图20181014143201.jpg