canvas实现图像放大镜
本文实例为大家分享了canvas实现图像放大镜的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>canvas-放大镜</title>
<style>
body{
padding:0px;
margin:0px;
}
#canvas{
border:1pxsolidred;
margin:100px;
}
</style>
</head>
<body>
<canvasid="canvas"width="800px"height="500px">
</canvas>
<script>
//获取到canvas元素
varcanvas=document.getElementById('canvas');
//获取canvas中的画图环境
varcontext=canvas.getContext('2d');
varimg=newImage();
img.src="./image/liuyifei.jpg";
window.onload=function(){
//获取放大镜
getfangdajing(context,canvas,img,150,2);
}
/*
*context:绘制环境对象,
*element:canvas元素对象
*img：图片对象
*diameter:放大镜的大小，
*ratio：图形的放大比例，
*（比例=原图：镜中图像）0<ratio<1缩小图像，ratio>1放大图像
**/
functiongetfangdajing(context,element,img,diameter,ratio){
//绘制图片
context.drawImage(img,0,0,element.width,element.height);
//鼠标在element中移动触发事件
element.onmousemove=function(e){
context.clearRect(0,0,element.width,element.height);
//绘制图片
context.drawImage(img,0,0,element.width,element.height);
//解决浏览器兼容问题
vare=e?e:window.event;
//获取鼠标在element元素中的坐标值
varcxy=windowToCanvas(element,e.clientX,e.clientY);
context.save();//保存当前绘制环境
//获取放大镜
getClip(context,cxy.x,cxy.y,diameter/2);
//将内容放入到放大镜中显示
//根据鼠标点的坐标值计算出在原图的坐标值
varytx0=img.width/element.width*cxy.x;//计算出鼠标在原图的X坐标值
varyty0=img.height/element.height*cxy.y//计算出鼠标在原图的Y坐标值
//（原图形/显示图形比例）*（放大镜直径/比例=镜中的图形所占大小）=原图要截取的图像大小
varytclipValueW=img.width/element.width*diameter/ratio;//在原图截取图片的宽度
varytclipValueH=img.height/element.height*diameter/ratio;//在原图截取图片的宽度
//.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，
//绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);
context.drawImage(img,ytx0-ytclipValueW/2,yty0-ytclipValueH/2,ytclipValueW,ytclipValueH,cxy.x-diameter/2,cxy.y-diameter/2,diameter,diameter);
context.restore();//恢复当前保存的绘制环境
}
}
/*
*获取放大镜框：进行图层切割
*context：绘制环境对象
*x:鼠标在画布中的X坐标
*y:鼠标在画布中的Y坐标
*r:放大镜的直径
**/
functiongetClip(context,x,y,r){
context.beginPath();
context.arc(x,y,r,0,Math.PI*2,false);
context.stroke();
context.clip();//沿形状切除向外的图层
}
/*
*坐标转换：将window中的坐标转换到元素盒子中的坐标，并返回(x,y)坐标
*element：canvas元素对象
*x:鼠标在当前窗口X坐标值
*y:鼠标在当前窗口Y坐标值
**/
functionwindowToCanvas(element,x,y){
//获取当前鼠标在window中的坐标值
//alert(event.clientX+"-------"+event.clientY);
//获取元素的坐标属性
varbox=element.getBoundingClientRect();
varbx=x-box.left;
varby=y-box.top;
return{x:bx,y:by};
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。