不能出现放大镜效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body {
background: #000;
}
#canvas {
display: block;
margin: 0px auto;
border: 1px solid #aaaaaa;
}
#scale-range {
display: block;
margin: 20px auto;
width: 800px;
}
#off-canvas {
display: none;
}
</style>
<body>
<canvas id="canvas">你的浏览器尚不支持canvas</canvas>
<canvas id="off-canvas">你的浏览器尚不支持canvas</canvas>
<script>
var canvas = document.getElementById("canvas");
var offCanvas = document.getElementById("off-canvas");
var context = canvas.getContext("2d");
var offContext = canvas.getContext("2d");
var image = new Image();
var isMouseDown = false;
var scale;
window.onload = function() {
canvas.width = 1152;
canvas.height = 768;
image.src = "images/img-lg.jpg";
image.onload = function () {
offCanvas.width = image.width;
offCanvas.heigth = 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.onmousedown = function (e) {
e.preventDefault();
// console.log(e.clientX, e.clientY);
point = windowToCanvas(e.clientX, e.clientY);
// console.log(point.x, point.y);
isMouseDown = true;
drawCanvasWidthMagnifier(true, point);
}
canvas.onmouseup = function (e) {
e.preventDefault();
isMouseDown = false;
drawCanvasWidthMagnifier(false);
}
canvas.onmouseout = function (e) {
e.preventDefault();
isMouseDown = false;
drawCanvasWidthMagnifier(false);
}
canvas.onmousemove = function (e) {
e.preventDefault();
if (isMouseDown == true) {
point = windowToCanvas(e.clientX, e.clientY);
// console.log(point.x, point.y);
drawCanvasWidthMagnifier(true, point);
}
}
function drawCanvasWidthMagnifier(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 imageLG_cx = point.x * scale;
var imageLG_cy = point.y * scale;
var mr = 200;
var sx = imageLG_cx - mr;
var sy = imageLG_cy - mr;
var dx = point.x - mr;
var dy = point.y - mr;
context.drawImage(offCanvas, sx, sy, 2*mr, 2*mr, dx, dy, 2*mr, 2*mr);
}
</script>
</body>
</html>
请大神们帮忙看看是哪里写错了,拜托拜托。