第一种:
在图形上面进行放大,放大倍数可以调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glass</title>
<style type="text/css">
#canvas {
display: block;
border: 1px solid red;
margin: 0 auto;
cursor: crosshair;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500">
</canvas>
<img src="e.jpg" style="display: none" id="img">
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = document.getElementById("img");
var centerPoint = {};
var originalRadius = 50;
var originalRectangle = {};
var scale = 5;
var scaleGlassRectangle
centerPoint.x = 200;
centerPoint.y = 200;
window.onload = function () {
addListener();
draw();
}
function drawBackGround() {
context.drawImage(img, 0, 0);
}
function calOriginalRectangle(point) {
originalRectangle.x = point.x - originalRadius;
originalRectangle.y = point.y - originalRadius;
originalRectangle.width = originalRadius * 2;
originalRectangle.height = originalRadius * 2;
}
function drawMagnifyingGlass() {
scaleGlassRectangle = {
x: centerPoint.x - originalRectangle.width * scale / 2,
y: centerPoint.y - originalRectangle.height * scale / 2,
width: originalRectangle.width * scale,
height: originalRectangle.height * scale
}
context.save();
context.beginPath();
context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
context.clip();
context.drawImage(canvas,
originalRectangle.x, originalRectangle.y,
originalRectangle.width, originalRectangle.height,
scaleGlassRectangle.x, scaleGlassRectangle.y,
scaleGlassRectangle.width, scaleGlassRectangle.height
)
context.restore();
context.beginPath();
var gradient = context.createRadialGradient(
centerPoint.x, centerPoint.y, originalRadius - 5,
centerPoint.x, centerPoint.y, originalRadius);
gradient.addColorStop(0, 'rgba(0,0,0,0.2)');
gradient.addColorStop(0.80, 'silver');
gradient.addColorStop(0.90, 'silver');
gradient.addColorStop(1.0, 'rgba(150,150,150,0.9)');
context.strokeStyle = gradient;
context.lineWidth = 5;
context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
context.stroke();
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawBackGround();
calOriginalRectangle(centerPoint);
drawMagnifyingGlass();
}
function addListener() {
canvas.onmousemove = function (e) {
centerPoint = windowToCanvas(e.clientX, e.clientY);
draw();
}
}
function windowToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
var bbox = canvas.getBoundingClientRect();
return {x: x - bbox.left, y: y - bbox.top}
}
</script>
</body>
</html>
第二种:
新建一个canvas画布,在上面显示放大部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#copycanvas {
border: 1px solid #000;
display: none;
}
#square {
width: 90px;
height: 90px;
background-color: #cc3;
border: 1px solid #f00;
opacity: 0.5;
position: absolute;
z-index: 999;
display: none;
cursor: crosshair;
}
</style>
</head>
<body>
<canvas id="canvas" width="450" height="300"></canvas>
<button id="big">局域放大</button>
<canvas id="copycanvas" width="450" height="300"></canvas>
<div id="square"></div>
<script>
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
copycanvas = document.getElementById('copycanvas'),
copycontext = copycanvas.getContext('2d'),
square = document.getElementById('square'),
squaredata = {},
box = canvas.getBoundingClientRect();
var btn = document.getElementById('big')
image = new Image();
image.src = "e.jpg";
image.onload = function () {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
btn.onclick = function () {
canvas.onmouseover = function (e) {
var x = e.clientX,
y = e.clientY;
createSquare(x, y);
};
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
if (x >= canvas.offsetLeft && x <= canvas.offsetLeft + canvas.width &&
y >= canvas.offsetTop && y <= canvas.offsetTop + canvas.height) {
createSquare(x, y);
} else {
hideSquare();
hideCanvas();
}
}
function showSquare() {
square.style.display = 'block';
}
function hideSquare() {
square.style.display = 'none';
}
function showCanvas() {
copycanvas.style.display = "inline";
}
function hideCanvas() {
copycanvas.style.display = "none";
}
function createSquare(x, y) {
x = x - 45 < canvas.offsetLeft ? canvas.offsetLeft : x - 45;
y = y - 45 < canvas.offsetTop ? canvas.offsetTop : y - 45;
x = x + 90 < box.right ? x : box.right - 90;
y = y + 90 < box.bottom ? y : box.bottom - 90;
squaredata.left = x;
squaredata.top = y;
moveSquare(x, y);
}
function moveSquare(x, y) {
square.style.left = x + "px";
square.style.top = y + "px";
showCanvas();
showSquare();
copy();
}
function copy() {
copycontext.drawImage(
canvas,
squaredata.left - box.left,
squaredata.top - box.top,
90,
90,
0,
0,
copycanvas.width,
copycanvas.height
);
}
}
</script>
</body>
</html>