js canvas實現(xiàn)放大鏡查看圖片功能
更新時間:2017年06月08日 15:43:50 作者:我在世界的盡頭想你
這篇文章主要為大家詳細介紹了js canvas實現(xiàn)放大鏡查看圖片功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了canvas實現(xiàn)放大鏡查看圖片功能的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background: black;"> <canvas id="myCanvas" style="display: block;margin: 0px auto;border: 10px solid #aaa "> 你的瀏覽器不支持canvas </canvas> <canvas id="offCanvas" style="display: none"></canvas> <script> var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); var offCanvas = document.getElementById("offCanvas"); var offContext = offCanvas.getContext("2d"); var isMouseDown = false; var scale; var image = new Image(); window.onload = function () { myCanvas.width = 300; myCanvas.height = 200; image.src = "1.jpg"; image.onload = function () { offCanvas.width = image.width; offCanvas.height = image.height; scale = offCanvas.width / myCanvas.width ; context.drawImage(image,0,0,myCanvas.width,myCanvas.height); offContext.drawImage(image,0,0); } }; function windowToCanvas(x,y) { var bbox = myCanvas.getBoundingClientRect(); return { x : x - bbox.left , y : y - bbox.top}; } myCanvas.onmousedown = function (e) { e.preventDefault(); var point = windowToCanvas(e.clientX , e.clientY); console.log(point); isMouseDown = true; drawCanvasWithMagnifier( true , point ); }; myCanvas.onmousemove = function (e) { e.preventDefault(); if (isMouseDown ){ var point = windowToCanvas(e.clientX , e.clientY); drawCanvasWithMagnifier( true , point ); } }; myCanvas.onmouseup = function (e) { e.preventDefault(); isMouseDown = false; drawCanvasWithMagnifier( false ); }; myCanvas.onmouseout = function (e) { e.preventDefault(); isMouseDown = false; drawCanvasWithMagnifier( false ); }; function drawCanvasWithMagnifier( isShowMagnifier , point) { context.clearRect(0,0,myCanvas.width,myCanvas.height); context.drawImage(image,0,0,myCanvas.width,myCanvas.height); if(isShowMagnifier == true ){ drawMagnifier( point ); } } function drawMagnifier( point ) { var imageLG_cx = point.x * scale ; var imageLG_cy = point.y * scale ; var mr = 20 ; var sx = imageLG_cx - mr ; var sy = imageLG_cy - mr ; var dx = point.x - mr ; var dy = point.y - mr ; context.save(); context.lineWidth = 5.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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript高級程序設(shè)計 讀書筆記之九 本地對象Array
本地對象Array,數(shù)組等操作函數(shù)2012-02-02利用JavaScript做數(shù)獨的完整實現(xiàn)過程
數(shù)獨游戲是在一個9*9的方格中進行填數(shù)字的游戲,需要滿足的規(guī)則是每行每列和每個子九宮格都是1~9的不重復數(shù)字,下面這篇文章主要給大家介紹了關(guān)于如何利用JavaScript做數(shù)獨的相關(guān)資料,需要的朋友可以參考下2021-09-09JavaScript實現(xiàn)帶箭頭標識的多級下拉菜單效果
這篇文章主要介紹了JavaScript實現(xiàn)帶箭頭標識的多級下拉菜單效果,可實現(xiàn)橫向與縱向箭頭的形式標識選中菜單項位置的功能,涉及javascript針對頁面元素位置的判定與樣式動態(tài)操作技巧,需要的朋友可以參考下2015-08-08JavaScript實現(xiàn)獲取用戶單擊body中所有A標簽內(nèi)容的方法
這篇文章主要介紹了JavaScript實現(xiàn)獲取用戶單擊body中所有A標簽內(nèi)容的方法,涉及javascript針對頁面元素及事件響應相關(guān)操作技巧,需要的朋友可以參考下2017-06-06