效果图
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>
