4.10.1_用离屏来实现放大镜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用离屏来实现放大镜</title>
<style>
body{
background: #eee;
}
#canvas{
background: #fff;
cursor: pointer;
margin-left: 20px;
margin-top: 20px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="520"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var offscreenCanvas = document.createElement('canvas');
var offscreenContext = offscreenCanvas.getContext('2d');
var magnifyRectangle = {};
var scaledMagnifyRectangle = {};
var image = new Image();
var dragging = false;
var imageData =null;
var manifyingGlassX;
var manifyingGlassY;
var manifyingRuduis = 100;
var manifyingScale = 1.2;
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
image.src = 'img/waterfall.jpg';
image.onload = function(){
context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);
}
canvas.onmousedown = function(e){
var loc = windowToCanvas(e.clientX,e.clientY);
e.preventDefault();
magnifyRectangle.x = loc.x;
magnifyRectangle.y = loc.y;
dragging = true;
}
canvas.onmousemove = function(e){
var loc;
if(dragging){
loc = windowToCanvas(e.clientX,e.clientY);
eraseMagnifyingGlass();
drawMagnifyingGlass(loc);
}
}
canvas.onmouseup = function(){
eraseMagnifyingGlass();
dragging = false;
imageData =null;
}
function eraseMagnifyingGlass(){
if(imageData != null ){
context.putImageData(imageData,magnifyRectangle.x,magnifyRectangle.y);
}
}
function drawMagnifyingGlass(mouse){
manifyingGlassX = mouse.x;
manifyingGlassY = mouse.y;
calculateMagnifyRectangle(mouse);
imageData = context.getImageData(magnifyRectangle.x,
magnifyRectangle.y,
magnifyRectangle.width,
magnifyRectangle.height);
context.save();
scaledMagnifyRectangle.width = magnifyRectangle.width*manifyingScale;
scaledMagnifyRectangle.height = magnifyRectangle.height*manifyingScale;
scaledMagnifyRectangle.x = manifyingGlassX-scaledMagnifyRectangle.width/2;
scaledMagnifyRectangle.y = manifyingGlassY-scaledMagnifyRectangle.height/2;
setClip();
offscreenContext.drawImage(canvas,
magnifyRectangle.x,
magnifyRectangle.y,
magnifyRectangle.width,
magnifyRectangle.height,
0,
0,
scaledMagnifyRectangle.width,
scaledMagnifyRectangle.height);
context.drawImage(offscreenCanvas,
0,
0,
scaledMagnifyRectangle.width,
scaledMagnifyRectangle.height,
scaledMagnifyRectangle.x,
scaledMagnifyRectangle.y,
scaledMagnifyRectangle.width,
scaledMagnifyRectangle.height);
context.restore();
}
function setClip(){
context.beginPath();
context.arc(manifyingGlassX,manifyingGlassY,manifyingRuduis,0,Math.PI*2,false);
context.clip();
}
function calculateMagnifyRectangle(mouse){
magnifyRectangle.x = mouse.x - manifyingRuduis;
magnifyRectangle.y = mouse.y - manifyingRuduis;
magnifyRectangle.width = 2*manifyingRuduis;
magnifyRectangle.height = 2*manifyingRuduis;
}
function windowToCanvas(x,y){
var bbox = canvas.getBoundingClientRect();
return{
x: x - bbox.left*(canvas.width/bbox.width),
y: y - bbox.top *(canvas.height/bbox.height)
}
}
</script>
</html>