效果截图：
JS代码：
<script>
// 初始化canvas01和上下文环境
var cav01 = document.getElementById(‘cav01‘);
var cxt01 = cav01.getContext(‘2d‘);
// 初始化canvas02和上下文环境
var cav02 = document.getElementById(‘cav02‘);
var cxt02 = cav02.getContext(‘2d‘);
//初始化image对象和缩放比例
var oImg = new Image();
var scale;
window.onload = function(){
//设置图片路径
oImg.src = ‘images/02.jpg‘;
//设置主canvas的宽高
cav01.width = 800;
cav01.height = 500;
oImg.onload = function(){
//设置离屏canvas的宽高，与原始图片的宽高一致
cav02.width = oImg.width;
cav02.height = oImg.height;
//初始化鼠标按下状态和设置缩放比例
var isMouseDown = false;
scale = cav02.width/cav01.width;
//绘制图像到canvas,第二个canvas初始时是隐藏的
cxt01.drawImage( oImg, 0, 0, cav01.width, cav01.height);
cxt02.drawImage( oImg, 0, 0, cav02.width, cav02.height);
//鼠标按下状态
cav01.onmousedown = function(e){
//获取鼠标相对于canvas的坐标
var pos = getMousePos(e.clientX,e.clientY);
//阻止鼠标默认事件
e.preventDefault();
//调用绘制放大镜方法
drawFilterImg(true,pos);
//把isMouseDown标记设置为true;
isMouseDown = true;
}
//鼠标移动状态
cav01.onmousemove = function(e){
//获取鼠标相对于canvas的坐标
var pos = getMousePos(e.clientX,e.clientY);
e.preventDefault();
//根据isMouseDown状态，调用绘制放大镜方法
if(isMouseDown == true ){
drawFilterImg(true,pos);
}
}
// 鼠标抬起状态
cav01.onmouseup = function(e){
//获取鼠标相对于canvas的坐标
var pos = getMousePos(e.clientX,e.clientY);
e.preventDefault();
//调用绘制放大镜方法
drawFilterImg(false);
//把isMouseDown状态设置为false
isMouseDown = false;
}
}
// 绘制放大镜方法 flag:用于判断是否开始绘制,pos:鼠标相对于canvas画布的坐标
function drawFilterImg(flag,pos){
//每次调用先清空canvas画布，避免出现重复图像
cxt01.clearRect( 0, 0, cav01.width, cav01.height);
cxt01.drawImage( oImg, 0, 0, cav01.width, cav01.height);
//定义放大镜半径
var r = 100;
if(flag == true){
//调用绘制放大区域方法
drawFilterImgCon(pos,r);
}
}
//绘制放大区域方法
function drawFilterImgCon(pos,r){
//大图图像上开始剪切的坐标
var sx = pos.x*scale - r;
var sy = pos.y*scale - r;
//画在canvas上的坐标
var dx = pos.x - r;
var dy = pos.y - r;
cxt01.save();
cxt01.strokeStyle = ‘rgba(0,0,0,0.3)‘;
cxt01.lineWidth = 2;
cxt01.beginPath();
cxt01.arc( pos.x, pos.y, r, 0 , Math.PI*2);
cxt01.stroke();
cxt01.clip();
cxt01.drawImage( cav02, sx, sy, r*2, r*2, dx, dy, r*2, r*2);
cxt01.restore();
}
//定义获取鼠标在canvas上位置的方法
//x：鼠标距离窗口的x坐标，y：鼠标距离窗口的y坐标
function getMousePos(x,y){
var oCanPos = cav01.getBoundingClientRect();
return {
x: x-oCanPos.left,
y: y-oCanPos.top
}
}
}
</script>
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas图片放大镜</title>
<style>
body{ background-color: #333; padding-top: 60px; }
#cav01{ display: block; margin: 0 auto; }
#cav02{ display: none;}
</style>
</head>
<body>
<!-- 主canvas -->
<canvas id="cav01" style="border:1px solid #666;"></canvas>
<!-- 离屏canvas,用于放置放大的图片，默认状态为隐藏 -->
<canvas id="cav02"></canvas>
</body>
</html>
时间： 2024-12-28 23:51:19