资源描述：
《Canvas 实现放大镜效果》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、Canvas实现放大镜效果原理首先选择图片的一块区域，然后将这块区域放大，然后再绘制到原先的图片上，保证两块区域的中心点一致,如下图所示:初始化获得canvas和image对象，这里使用![]()
标签预加载图片,关于图片预加载可以看这里varcanvas=document.getElementById("canvas");varconte
2、xt=canvas.getContext("2d");varimg=document.getElementById("img");设置相关变量//图片被放大区域的中心点，也是放大镜的中心点varcenterPoint={};//图片被放大区域的半径varoriginalRadius=100;//图片被放大区域varoriginalRectangle={};//放大倍数varscale=2;//放大后区域varscaleGlassRectangle画背景图片functiondrawBackGround(){context.drawIm
3、age(img,0,0);}计算图片被放大的区域的范围这里我们使用鼠标的位置作为被放大区域的中心点(放大镜随着鼠标移动而移动)，因为canvas在画图片的时候，需要知道左上角的坐标以及区域的宽高，所以这里我们计算区域的范围functioncalOriginalRectangle(point){originalRectangle.x=point.x-originalRadius;originalRectangle.y=point.y-originalRadius;originalRectangle.width=originalRadi
4、us*2;originalRectangle.height=originalRadius*2;}绘制放大镜区域裁剪区域放大镜一般是圆形的，这里我们使用clip函数裁剪出一个圆形区域，然后在该区域中绘制放大后的图。一旦裁减了某个区域，以后所有的绘图都会被限制的这个区域里，这里我们使用save和restore方法清除裁剪区域的影响。save保存当前画布的一次状态，包含canvas的上下文属性，例如style，lineWidth等，然后会将这个状态压入一个堆栈。restore用来恢复上一次save的状态，从堆栈里弹出最顶层的状态。cont
5、ext.save();context.beginPath();context.arc(centerPoint.x,centerPoint.y,originalRadius,0,Math.PI*2,false);context.clip();......context.restore();计算放大镜区域通过中心点、被放大区域的宽高以及放大倍数，获得区域的左上角坐标以及区域的宽高。scaleGlassRectangle={x:centerPoint.x-originalRectangle.width*scale/2,y:centerPo
6、int.y-originalRectangle.height*scale/2,width:originalRectangle.width*scale,height:originalRectangle.height*scale}绘制图片在这里我们使用context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);方法，将canvas自身作为一副图片，然后取被放大区域的图像，将其绘制到放大镜区域里。context.drawImage(canvas,originalRectangl
7、e.x,originalRectangle.y,originalRectangle.width,originalRectangle.height,scaleGlassRectangle.x,scaleGlassRectangle.y,scaleGlassRectangle.width,scaleGlassRectangle.height);绘制放大边缘createRadialGradient用来绘制渐变图像context.beginPath();vargradient=context.createRadialGradient(cen
8、terPoint.x,centerPoint.y,originalRadius-5,centerPoint.x,centerPoint.y,originalRadius);gradient.addColorStop(0,'rgba(0
