转：canvas--放大镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)事件</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()
?//鼠標(biāo)左鍵是否被點(diǎn)擊
?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)
? }
? //將屏幕的坐標(biāo)轉(zhuǎn)換為在canvas的坐標(biāo)
? function windowToCanvas(x,y){
? //獲取canvas距離瀏覽器周圍的left和top值
? var bbox=canvas.getBoundingClientRect();
?
? return {x:x-bbox.left,y:y-bbox.top}? ?
? }?
? //鼠標(biāo)按下
? 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
? ?? ?//繪制放大鏡 當(dāng)onmouseup、onmouseout時(shí) drawcanvasWithMagnifier傳入false
? ?? ?drawcanvasWithMagnifier(true,point)? ?? ?? ?? ?
? }
? //鼠標(biāo)移動(dòng)
? canvas.οnmοusemοve=function(e){
? e.preventDefault(e);
? //需要查看鼠標(biāo)的左鍵是否點(diǎn)擊著 如果沒有點(diǎn)擊則釋放放大鏡效果
? //isMouseDown為true時(shí)顯示放大鏡
? if(isMouseDown){
? var point=windowToCanvas(e.clientX,e.clientY);
? //console.log('point.left'+point.x+','+e.clientX+','+e.clientY)
? drawcanvasWithMagnifier(true,point)
? }
? }
? //鼠標(biāo)松開
? canvas.οnmοuseup=function(e){
? e.preventDefault(e);
? isMouseDown=false;
? drawcanvasWithMagnifier(false)
? }
? //鼠標(biāo)移開
? 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);
? //鼠標(biāo)點(diǎn)擊的位置 計(jì)算出在放大圖像中的位置 ?計(jì)算出大圖的中心坐標(biāo)
? var imageLG_cx=point.x*scale
? var imageLg_cy=point.y*scale
? //放大鏡顯示的大小 設(shè)置為200 放大鏡的半徑為200
? var mr=200
? //計(jì)算圓形的坐標(biāo)和寬高
? 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>
總結(jié)
以上是生活随笔為你收集整理的转：canvas--放大镜效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 转：谷歌离线地图基础
- 下一篇： 如何通过RFID开发来迎接第四次工业革命