最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
canvas实现图像放大镜
时间:2022-06-25 14:32:28 编辑:袖梨 来源:一聚教程网
代码如下 | 复制代码 |
body{ padding: 0px; margin: 0px; } #canvas{ border: 1px solid red; margin: 100px; }
//获取到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 * */ 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}; }
|