canvas畫布實現放大鏡
阿新 • • 發佈：2019-01-22
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #cv{ border:1px solid; } </style> </head> <body> <canvas id="cv" width="467" height="491"></canvas> </body> <script type="text/javascript"> var ctx = cv.getContext("2d"); var img = new Image(); img.src="../3.jpeg"; img.onload = function(){ ctx.drawImage(img,0,0); } cv.onmousedown=function(e){ var e = e|| window.event; var x = e.clientX - cv.offsetLeft; var y = e.clientY-cv.offsetTop; ctx.beginPath(); ctx.moveTo(x,y); document.onmousemove=function(e){ //canvas中任何繪製的圖形移動,都是一直在重新繪製,所以每次繪製之前需要清空畫布,避免畫布上多次重複繪製 cv.width=cv.width; ctx.drawImage(img,0,0); var e = e|| window.event; var x = e.clientX - cv.offsetLeft; var y = e.clientY-cv.offsetTop; console.log(x,y); //將圖片剪裁,其中的引數分貝是哪個圖片,從xy什麼位置開始剪裁,剪裁寬高,剪裁之後要顯示的xy位置,以及顯示圖片的寬高,這個方法剪裁的是原圖 ctx.drawImage(img,x-40,y-40,80,80,x-80,y-80,160,160); //圖形組合,後面寫的為源圖片,此屬性上面為目標圖片,這個屬性是顯示在源圖片內部的目標圖片,並且源圖片透明 ctx.globalCompositeOperation="destination-in"; ctx.arc(x,y,80,0,Math.PI*2,false); ctx.fill(); //添加了源圖片之後讓目標圖片還是完全顯示:這行程式碼可以將目標圖片放在最上面 ctx.globalCompositeOperation="destination-over"; ctx.drawImage(img,0,0); } } //當滑鼠擡起的時候,關閉滑鼠移動事件 cv.onmouseup = function(){ document.onmousemove=null; //此刻雖然停止了,但是放大鏡還停止在頁面上, //讓源圖片完全顯示使用這行程式碼:將源圖片可以提高到所有圖片的最上面 ctx.globalCompositeOperation="source-over"; //將Img作為源圖片進行繪製 ctx.drawImage(img,0,0); } </script> </html>