<!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>
新闻热点
疑难解答
