canvas局部放大,canvas图像缩小放大
本文主要记录了canvas在实现图像、文字处理、离屏技术、放大镜特效时使用的API。我们先来看看效果：
模糊的照片：
用鼠标单击任意位置进行放大：
哇~一个帅哥哈哈哈哈~
1、放大镜原理
实现效果：如上图所示，点击或滑动鼠标显示一个区域，区域内显示相应被点击部分的放大清晰图片。那么这个问题可以分为三个部分：
1.如何在画布上再画一张画布(画面模糊)；
2.如何裁剪出画布中显示的圆形区域(放大图片清晰)。
3.鼠标点击滑动时如何显示区域；
2、显示模糊照片
其实一般的交互都不是一张模糊的照片。在这里，我只是使用了一个模糊的原始图像来夸大效果。哈哈哈，canvas本身可以过滤清晰的图像，涉及到很多图形算法。然后我不会，默默的打开PS，手动高斯模糊一张照片.嗯，没问题！
首先定义一个画布元素。
canvas id= canvas /canvas//Define canvas canvas var canvas 1=document . getelementbyid( canvas 1 )；CTX 1=canvas . get context( 2d )；//模糊图像加载var image1=new Image()；Image.src=。/fuzzy . png ；//画图image1 . onload=function(){//Draw image在画布上画一张模糊的图片ctx1.drawimage (image1，0，0，canvas 1.width，canvas 1 . height)；};Ctx1.drawImage(图片，X位置，Y位置，图片显示宽度，图片显示高度)
3、加载清晰图片
让我们添加另一个画布(放大镜下看到的图片)并最初隐藏它：
canvas id= canvas 2 style= display:none /canvas var canvas 2=document . getelementbyid( canvas 2 )，ctx2=canvas2.getContext(2d )，scale=2；//放大//canvas2的图片尺寸是模糊图片Canvas 2 . width=Canvas . width * scale的两倍；canvas 2 . height=canvas . height * scale；//在canvas2中加载图片var image2=new Image()；image2 . src= name 2 . png ；image2 . onload=function(){ CT x2 . draw image(image2，0，0，canvas2.width，canvas 2 . height)；};4、显示放大镜
4.1 绘制放大镜
鼠标所在的位置点(x，y)是该区域的中心。计算清晰图片所在的位置点，截取圆。
//保存当前状态CTX 1 . Save()；//border CTX 1 . stroke style= # 9 eddf 1 ；CTX 1 . line width=3；//开始绘制CTX 1 . begin path()；//ctx1.arc(x，y，mr，0，Math。PI * 2)；CTX 1 . stroke()；//表示剪切CTX 1 . clip()；//绘制ctx1。drawimage(那个。canvas 2，sx，sy，2 * Mr，2 * Mr，dx，dy，2 * Mr，2 * Mr)；//释放当前状态CTX 1 . restore()；
Save()和restore()，绘图状态的最佳伙伴：用于保存和释放当前状态，不影响其他操作；绘制图形的变化过程可以重复；
Clip():指示剪辑区域。
4.2 离屏技术
所谓离屏技术，就是在一张画布上再画一张画布。前面用来画图的API是drawImage()，可以分别支持3，5，9个参数。第一个参数可以是图片，也可以是画布对象！然后我们可以用这个方法在圆上画出清晰的图~
//圆的半径为mrvar mr=100//对应模糊图左上角的起点var dx=x-mr，dy=y-Mr；//找到清晰截图左上角的起点var sx=x * scale-mr，sy=y * scale-Mr；
.CTX . clip()；//在相应的位置重新绘制图片//drawimage (img，sx，sy，swidth，she height，x，y，width，Height)带9个参数//img: picture /canvas //sx: x图片起点//sy: y图片起点//width:要绘制的图片宽度//height:要在画布上显示的图片高度//width，Height:要在画布上显示的大小ctx1.drawimage (canvas 2，sx，sy，2 * Mr，2 * Mr.5、鼠标交互事件
效果：点击滑动鼠标反应，但松开鼠标或移开画布无效。
//定义一个判断鼠标是否是点击滑动的标识符定义变量标志；//鼠标点入事件画布。onmousedown=function(e){ flag=true；//显示放大镜}//鼠标移动事件画布。onmousemove=function(e){ if(flag){//显示放大镜}}//鼠标松开事件画布。onmouseup=function(e){ flag=false；//隐藏放大镜}//鼠标离开事件画布。onmouseout=function(e){ flag=false；//隐藏放大镜}完整代码：
定义变量标度=3;var mr=150var photo={ //初始化init:function(){ var that=this；那个。画布=文档。getelementbyid(“canvas”)；那个。CTX=那个。画布。获取上下文(“2d”)；那个。can vas 2=文档。getelementbyid( can vas 2 )；那个。CT x2=那个。can vas 2。获取上下文(“2d”)；那个。画布。宽度=800；那个。画布。身高=500；那个。画布2。宽度=那个。画布。宽度*比例；那个。画布2。身高=那个。画布。高度*比例；那个。image1=新图像()；that.image1.src= ./姓名3。jpg ；那个。image2=新图像()；that.image2.src= ./姓名4。jpg ；那个。图1。onload=function(){ that。CTX。画图像(那个。image1，0，0，那个. canvas.width，那个。画布。身高)；};那个。图2。onload=function(){ that。CT x2。画图像(那个。图像2，0，0，那个. canvas2.width，那个。can vas 2。身高)；那个。move evt()；};}，bigerImage: function(x，y){ var that=this；var imageX=x * scale，imageY=y * scale，sx=imageX - mr，sy=imageY-Mr；var dx=x - mr，dy=y-Mr；那个。CTX。save()；那个。CTX。stroke style= # 9 eddf 1那个。CTX。线宽=3；那个。CTX。begin path()；that.ctx.arc(x，y，mr，0，Math .PI * 2)；那个。CTX。shadow color= # 6ed 25 b那个。CTX。阴影模糊=10；那个。CTX。笔画()；那个。CTX。clip()；那个。CTX。画图像(那个。能vas 2，sx，sy，2 * mr，2 * mr，dx，dy，2 * mr，2 * Mr)；那个。CTX。restore()；}, //移动move evt:function(){ var that=this；那个。画布。onmousedown=function(e){ that。flag=true那个。显示图像(e)；}那个。画布。onmousemove=function(e){ if(that。flag){那个。显示图像(e)}。画布。onmouseup=函数(e){ that。hide image(e)}，show image:function(e){ e . prevent default()var x=e . offsetx，y=e.offsetY，that=thisthat.ctx.clearRect(0，0，that.canvas.width，that。画布。身高)；that.ctx.drawImage(that.image1，0，0，that.canvas.width，that。画布。身高)；that.bigerImage(x，y)；}，隐藏图像：function(e){ e . prevent default()var=this；that . flag=false that . CTX . clear rect(0，0，that.canvas.width，that。画布。身高)；that.ctx.drawImage(that.image1，0，0，that.canvas.width，that。画布。身高)；}}window.onload=函数(){照片。init()；}到此这篇关于帆布实现放大镜效果完整案例分析（附代码)的文章就介绍到这了，更多相关帆布放大镜内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。