• 欢迎访问杨思积的博客,专注于前端资讯分享,前端技术交流!

离屏canvas制作低配版放大镜

精选代码 Tomy 280次浏览 已收录 0个评论 扫描二维码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas放大镜</title>
</head>
<body>
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
您的浏览器尚不支持canvas
</canvas>
<canvas id="offCanvas" style="display:none;">
</canvas>
<script>
    var canvas=document.getElementById("canvas")
	var context=canvas.getContext("2d")
	var offCanvas=document.getElementById("offCanvas")
	var offContext=offCanvas.getContext("2d")
    var down=false
	var image=new Image()
	var scale
window.onload=function(){
	canvas.width=383;
	canvas.height=239;
	image.src="http://www.bz55.com/uploads/allimg/150407/139-15040GUF7.jpg";
	image.onload=function(){
		offCanvas.width=image.width;
		offCanvas.height=image.height;
		scale=offCanvas.width/canvas.width;
		context.drawImage(image,0,0,canvas.width,canvas.height);
		offContext.drawImage(image,0,0)
		}
	}
	function weizhi(x,y){
		var bbox=canvas.getBoundingClientRect()
		return {x:x-bbox.left,y:y-bbox.top};
		}
	canvas.onmousedown=function(e){
		e.preventDefault();
		var point=weizhi(e.clientX,e.clientY);
		down=true;
		drawcanvasfaj(true,point);
		}
	canvas.onmousemove=function(e){
		e.preventDefault();
		if(down){
			var point=weizhi(e.clientX,e.clientY)
			drawcanvasfaj(true,point);
			}
		}
	canvas.onmouseup=function(e){
		e.preventDefault();
		down=false;
		drawcanvasfaj(false);
		}
	canvas.onmouseout=function(e){
		e.preventDefault();
		down=false;
		drawcanvasfaj(false);
		}
	function drawcanvasfaj(boolean,point){
		context.clearRect(0,0,canvas.width,canvas.height);
		context.drawImage(image,0,0,canvas.width,canvas.height);
		if(boolean==true){
			drawfaj(point)
			}
		}
	function drawfaj(point){
		var imageLG_cx=point.x*scale
		var imageLG_cy=point.y*scale
		var mr=100
		var sx=imageLG_cx-mr
		var sy=imageLG_cy-mr
		var dx=point.x-mr
		var dy=point.y-mr
		context.save();
		context.lineWidth=2;
		context.strokeStyle="#FFCCCC"
		context.beginPath();
		context.arc(point.x,point.y,mr,0,Math.PI*2)
		context.stroke();
		context.clip();
		context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr)
		context.restore();
		}
</script>
</body>
</html>

代码演示
杨思积的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明离屏canvas制作低配版放大镜
喜欢 (0)
[嘿嘿,你懂的]
分享 (0)
Tomy
关于作者:
一个前端爱好者!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址