JavaScript HTML5画布实现放大镜效果完整示例

本文实例讲述了JavaScript HTML5画布实现放大镜效果。分享给大家供大家参考，具体如下：

效果：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' titlewww.jb51.net画布放大镜/title style # copy canvas { border : 1px solid # 000；显示器：无；} #方形{宽度： 90px高度： 90px背景色： # cc3border: 1px固体# f00opacity: 0.5绝对位置：z指数： 999；显示器：无；光标：十字准线；}/style/head dycanvas id=' canvas ' width=' 450 ' height=' 676 '/canvascanvas id=' copy canvas ' width=' 300 ' height=' 300 '/canvasdiv id=' square '/div script var canvas=document。getelementbyid(' canvas ')，//获取帆布对象context=canvas.getContext('2d ')，//获取上下文复制画布=文档。getelementbyid('复制画布')，//获取复制画布复制上下文=复制画布。getcontext(' 2d ')，square=document。getelementbyid(' square ')，//获取透明框squaredata={}，//用来保存选择框数据box=画布。getboundingclientrect()；//getBoundingClientRect方法可以获取元素上、下、左、右分别相对浏览器的坐标位置//创建图像对象，并加载Image=new Image()；图像。src=' 3。jpg '；图像。onload=function(){ context。绘制图像(图像，0，0，画布。宽度，画布。高度)；};帆布。onmouseover=function(e){ var x=e . client x，//获取鼠标实时坐标y=e.clientYcreateSquare(x，y)；//保存透明选择框属性};窗户。onmousemove=function(e){ var x=e . client x，y=e.clientY//判断鼠标是否移出画布if(x=画布。offsetleft x=画布。偏移画布。宽度y=画布。offsettop y=画布。偏移画布。高度){创建正方形(x，y)；} else { HideSQuaRE()；hideacanvas()；} }函数showSquare(){ square。风格。display=' block}函数HideSQuaRE(){ square。风格。显示='无'；}函数show canvas(){复制canvas。风格。display=' inline}函数HideCanvas(){复制画布。风格。显示='无'；}函数createSquare(x，y){ //控制选择框不移动出canvas x=x - 45 canvas.offsetLeft？帆布。offset left : x-45；y=y - 45 canvas.offsetTop？帆布。偏移顶部：y-45；x=x 90盒，对吗？x :盒。右-90；y=y 90框。底部？y :箱。底部-90；方形数据。left=x；方形数据。top=y；moveSquare(x，y)；}函数moveSquare(x，y){ square。风格。left=x ' px正方形。风格。top=y ' pxshowCanvas()；showSquare()；copy()；}函数copy(){复制上下文。绘制图像(canvas，squaredata.left - box.left，squaredata.top - box.top，90，90，0，0，copycanvas.width，copycanvas。高度)；}/脚本/正文/html感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试一下运行效果。

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript图片操作技巧大全》 、 《JavaScript运动效果与技巧汇总》 、 《JavaScript+HTML5特效与技巧汇总》 、 《JavaScript图形绘制技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。