canvas实现图像放大镜
更新时间：2017年02月06日 15:51:57 投稿：lijiao
这篇文章主要为大家详细为大家详细介绍了canvas实现图像放大镜的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了canvas实现图像放大镜的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas-放大镜</title>
<style>
body{
padding: 0px;
margin: 0px;
}
#canvas{
border: 1px solid red;
margin: 100px;
}
</style>
</head>
<body>
<canvas id="canvas" width="800px" height="500px">
</canvas>
<script>
//获取到canvas元素
var canvas = document.getElementById('canvas');
//获取canvas中的画图环境
var context = canvas.getContext('2d');
var img = new Image();
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放大图像
* */
function getfangdajing(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);
//解决浏览器兼容问题
var e = e ? e : window.event;
//获取鼠标在element元素中的坐标值
var cxy = windowToCanvas(element,e.clientX,e.clientY);
context.save();//保存当前绘制环境
//获取放大镜
getClip(context,cxy.x,cxy.y,diameter/2);
//将内容放入到放大镜中显示
//根据鼠标点的坐标值计算出在原图的坐标值
var ytx0=img.width/element.width*cxy.x;//计算出鼠标在原图的X坐标值
var yty0=img.height/element.height*cxy.y//计算出鼠标在原图的Y坐标值
//（原图形/显示图形比例）* （放大镜直径/比例= 镜中的图形所占大小）= 原图要截取的图像大小
var ytclipValueW = img.width/element.width*diameter/ratio;//在原图截取图片的宽度
var ytclipValueH = 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:放大镜的直径
* */
function getClip(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坐标值
* */
function windowToCanvas(element,x,y){
//获取当前鼠标在window中的坐标值
// alert(event.clientX+"-------"+event.clientY);
//获取元素的坐标属性
var box = element.getBoundingClientRect();
var bx = x - box.left;
var by = y - box.top;
return {x:bx,y:by};
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在BS中，xml，html，css和js我们都学过，起初分不清这四者的区别和联系，随着知识的增长，有了一些体会，下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别，需要的朋友参考下2016-02-02
在做用户实名验证时,常会用到身份证号码的正则表达式及校验方案,下面这篇文章主要给大家介绍了关于JS正则表达式及身份证号码验证的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了C# sogou地图API用法,包括了各种常用属性的用法实例,需要的朋友可以参考下2014-09-09
这篇文章主要为大家详细介绍了js简单实现网页换肤功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要为大家详细介绍了HTML+CSS+JavaScript实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
JS的数字类型一旦数字超过限值,JS将会丢失精度,导致前后端的值出现不一致,这篇文章主要给大家介绍了关于JS数字精度丢失的原因分析及解决方法,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了JS实现仿中关村论坛评分后弹出提示效果的方法,实例分析了javascript弹出特效的css与提示框的具体实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了微信小程序实现聊天室功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
有时候我们在网页制作过程中需要弹出窗口，一般情况下，我们更希望窗口可以居中显示2007-08-08
这篇文章主要介绍了JS实现带有3D立体感的银灰色竖排折叠菜单代码,可实现基本的JS响应鼠标事件动态展开与折叠菜单栏的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
最新评论