帆布怎么实现放大镜效果

　　介绍

这篇文章主要介绍了画布怎么实现放大镜效果,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

<中心>

帆布怎么实现放大镜效果

<强>

<中心>

帆布怎么实现放大镜效果

& lt;帆布id=癱anvas"宽度=?00”;身高=?00“比; 　　& lt;/canvas> 　　 　　& lt; img src=https://www.yisu.com/zixun/癷mage.png”风格=毕允?没有“id=" img "> 

画布var=. getelementbyid (“canvas");
　　var=canvas.getContext上下文(“2 d");
　　var img=. getelementbyid (“img"); 

//图片被放大区域的中心点,也是放大镜的中心点
　　var中心={};//图片被放大区域的半径
　　var originalRadius=100;//图片被放大区域
　　var originalRectangle={};//放大倍数
　　var规模=2;//放大后区域
　　var scaleGlassRectangle 

函数drawBackGround () {
　　上下文。drawImage (img, 0, 0);
　　}

函数calOriginalRectangle(点){
　　originalRectangle。x= - originalRadius;
　　originalRectangle。y= - originalRadius;
　　originalRectangle。宽度=originalRadius * 2;
　　originalRectangle。身高=originalRadius * 2;
　　}

<强>

context.save (); 　　context.beginPath (); 　　context.arc(中心。x,中心。y, originalRadius 0数学。π* 2,假); 　　context.clip (); 　　…… 　　context.restore (); 

 scaleGlassRectangle={
　　x:中心。x - originalRectangle。宽度*规模/2,
　　y:中心。y - originalRectangle。高度*规模/2,
　　宽度:originalRectangle。宽度*规模,
　　高度:originalRectangle。高度*规模
　　}

context.drawImage(画布, 　　originalRectangle。x originalRectangle.y 　　originalRectangle。宽度、originalRectangle.height 　　scaleGlassRectangle。x scaleGlassRectangle.y 　　scaleGlassRectangle。宽度,scaleGlassRectangle.height 　　);

context.beginPath (); 　　var梯度=context.createRadialGradient ( 　　中心。x,中心。y, originalRadius - 5, 　　中心。x,中心。y, originalRadius); 　　梯度。addColorStop (0, & # 39; rgba (0, 0, 0, 0.2) & # 39;); 　　gradient.addColorStop(0.80, & # 39;银# 39;); 　　gradient.addColorStop(0.90, & # 39;银# 39;); 　　gradient.addColorStop (1.0, & # 39; rgba (150150150, 0.9) & # 39;); 　　 　　上下文。strokeStyle=梯度; 　　上下文。线宽=5; 　　context.arc(中心。x,中心。y, originalRadius 0数学。π* 2,假); 　　context.stroke ();

<强>

画布。onmousemove=function (e) { 　　…… 　　} 

函数windowToCanvas (x, y) {
　　var bbox=canvas.getBoundingClientRect ();
　　{:x - bbox返回。左:y - bbox.top}
　　}

 #帆布{
　　显示:块;
　　边界:1 px固体红;
　　保证金:0汽车;
　　光标:十字丝;
　　}

<中心>

帆布怎么实现放大镜效果

<中心>

帆布怎么实现放大镜效果

<强>

<中心>

帆布怎么实现放大镜效果

<中心>

帆布怎么实现放大镜效果 

帆布怎么实现放大镜效果