放大不糊的方法就是放大img而不是canvas，因爲畫布分辨率沒有原圖高。
<!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="755.833" height="430.75">
</canvas>
<img src="0.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 = 100;
// 圖片被放大區域
var originalRectangle = {};
// 放大倍數
var scale = 5;
//alert("111")
// 放大後區域
var scaleGlassRectangle
centerPoint.x = 0;
centerPoint.y = 0;
img.onload = function () {
addListener();
draw();
}
function drawBackGround() {
context.drawImage(img, 0, 0,canvas.width,canvas.height);
}
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
// )
//放大不糊的方法就是放大img而不是canvas，因爲畫布分辨率沒有原圖高。
scalex=img.width/canvas.width;
scaley=img.height/canvas.height;
context.drawImage(img,
originalRectangle.x*scalex, originalRectangle.y*scaley,
originalRectangle.width*scalex, originalRectangle.height*scaley,
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();
}
document.onkeyup = function (e) {
if (e.key == 'w') {
//alert("w");
centerPoint.y -=0.5 //intAdd(centerPoint.y, -2);
}
if (e.key == 'a') {
centerPoint.x -=0.5 //intAdd(centerPoint.x, -2);
}
if (e.key == 's') {
centerPoint.y +=0.5// intAdd(centerPoint.y, 2);
}
if (e.key == 'd') {
centerPoint.x +=0.5// intAdd(centerPoint.x, 2);
}
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>