轉：canvas--放大鏡效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠標事件</title>
</head>
<body>
<canvas id="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 image=new Image()
?//鼠標左鍵是否被點擊
?var isMouseDown=false;
?//定義縮放值
?var scale?
?window.οnlοad=function(){
? canvas.width="1030";
? canvas.height='750';
? image.src="timg.jpg"
? //圖片的原始尺寸要大于canvas的尺寸
? image.οnlοad=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)
? }
? //將屏幕的坐標轉換為在canvas的坐標
? function windowToCanvas(x,y){
? //獲取canvas距離瀏覽器周圍的left和top值
? var bbox=canvas.getBoundingClientRect();
?
? return {x:x-bbox.left,y:y-bbox.top}? ?
? }?
? //鼠標按下
? canvas.οnmοusedοwn=function(e){
? e.preventDefault(e);
? var point=windowToCanvas(e.clientX,e.clientY);
? //console.log('point.left'+point.x+','+e.clientX+','+e.clientY)
? ?? ?isMouseDown=true
? ?? ?//繪制放大鏡當onmouseup、onmouseout時 drawcanvasWithMagnifier傳入false
? ?? ?drawcanvasWithMagnifier(true,point)? ?? ?? ?? ?
? }
? //鼠標移動
? canvas.οnmοusemοve=function(e){
? e.preventDefault(e);
? //需要查看鼠標的左鍵是否點擊著如果沒有點擊則釋放放大鏡效果
? //isMouseDown為true時顯示放大鏡
? if(isMouseDown){
? var point=windowToCanvas(e.clientX,e.clientY);
? //console.log('point.left'+point.x+','+e.clientX+','+e.clientY)
? drawcanvasWithMagnifier(true,point)
? }
? }
? //鼠標松開
? canvas.οnmοuseup=function(e){
? e.preventDefault(e);
? isMouseDown=false;
? drawcanvasWithMagnifier(false)
? }
? //鼠標移開
? canvas.οnmοuseοut=function(e){
? e.preventDefault(e);
? isMouseDown=false;
? drawcanvasWithMagnifier(false)
? }
? function drawcanvasWithMagnifier(isMouseDown,point){
? context.clearRect(0,0,canvas.width,canvas.height)
? context.drawImage(image,0,0,canvas.width,canvas.height);
? if(isMouseDown){
? //繪制放大鏡】
? drawMagnifier(point)
? }
? }
? function drawMagnifier(point){
? //console.log('point.x'+point.x+'point.y'+point.y);
? //鼠標點擊的位置計算出在放大圖像中的位置 ?計算出大圖的中心坐標
? var imageLG_cx=point.x*scale
? var imageLg_cy=point.y*scale
? //放大鏡顯示的大小設置為200 放大鏡的半徑為200
? var mr=200
? //計算圓形的坐標和寬高
? var sx=imageLG_cx-mr;
? var sy=imageLg_cy-mr;
? //用戶可見的位置
? var dx=point.x-mr;
? var dy=point.y-mr;
? context.save()
? context.lineWidth=10.0;
? context.strokeStyle='#069'
? 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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247534.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247534.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247534.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！