JavaScript+HTML5 canvas實現放大鏡效果完整示例

來源：懂視網責編：小采時間：2020-11-27 21:57:04

JavaScript+HTML5 canvas實現放大鏡效果完整示例

JavaScript+HTML5 canvas實現放大鏡效果完整示例:本文實例講述了JavaScript+HTML5 canvas實現放大鏡效果。分享給大家供大家參考，具體如下：效果： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title>ww

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript+HTML5 canvas實現放大鏡效果完整示例:本文實例講述了JavaScript+HTML5 canvas實現放大鏡效果。分享給大家供大家參考，具體如下：效果： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title>ww

本文實例講述了JavaScript+HTML5 canvas實現放大鏡效果。分享給大家供大家參考，具體如下：

效果：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>www.gxlcms.com canvas放大鏡</title>
 <style>
 #copycanvas {
 border: 1px solid #000;
 display: none;
 }
 #square {
 width: 90px;
 height: 90px;
 background-color: #cc3;
 border: 1px solid #f00;
 opacity: 0.5;
 position: absolute;
 z-index: 999;
 display: none;
 cursor: crosshair;
 }
 </style>
</head>
<body>
<canvas id="canvas" width="450" height="676"></canvas>
<canvas id="copycanvas" width="300" height="300"></canvas>
<div id="square"></div>
<script>
 var canvas = document.getElementById('canvas'), //獲取canvas對象
 context = canvas.getContext('2d'), //獲取上下文
 copycanvas = document.getElementById('copycanvas'), //獲取copycanvas
 copycontext = copycanvas.getContext('2d'),
 square = document.getElementById('square'), //獲取透明框
 squaredata = {}, //用來保存選擇框數據
 box = canvas.getBoundingClientRect();
 //getBoundingClientRect方法可以獲取元素上、下、左、右分別相對瀏覽器的坐標位置
 //創建圖像對象，并加載
 image = new Image();
 image.src = "3.jpg";
 image.onload = function(){
 context.drawImage(image,0,0,canvas.width,canvas.height);
 };
 canvas.onmouseover = function(e){
 var x = e.clientX, //獲取鼠標實時坐標
 y = e.clientY;
 createSquare(x,y); //保存透明選擇框屬性
 };
 window.onmousemove = function(e){
 var x = e.clientX,
 y = e.clientY;
 //判斷鼠標是否移出canvas
 if(x >= canvas.offsetLeft && x <= canvas.offsetLeft + canvas.width &&
 y >= canvas.offsetTop && y <= canvas.offsetTop + canvas.height){
 createSquare(x,y);
 }else{
 hideSquare();
 hideCanvas();
 }
 }
 function showSquare(){
 square.style.display = 'block';
 }
 function hideSquare(){
 square.style.display = 'none';
 }
 function showCanvas(){
 copycanvas.style.display = "inline";
 }
 function hideCanvas(){
 copycanvas.style.display = "none";
 }
 function createSquare(x,y){
 //控制選擇框不移動出canvas
 x = x - 45 < canvas.offsetLeft ? canvas.offsetLeft:x - 45;
 y = y - 45 < canvas.offsetTop ? canvas.offsetTop:y - 45;
 x = x + 90 < box.right ? x:box.right - 90;
 y = y + 90 < box.bottom ? y:box.bottom - 90;
 squaredata.left = x;
 squaredata.top = y;
 moveSquare(x,y);
 }
 function moveSquare(x,y){
 square.style.left = x + "px";
 square.style.top = y + "px";
 showCanvas();
 showSquare();
 copy();
 }
 function copy(){
 copycontext.drawImage(
 canvas,
 squaredata.left - box.left,
 squaredata.top - box.top,
 90,
 90,
 0,
 0,
 copycanvas.width,
 copycanvas.height
 );
 }
</script>
</body>
</html>

感興趣的朋友可使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試一下運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript運動效果與技巧匯總》、《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖形繪制技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript+HTML5 canvas實現放大鏡效果完整示例

推薦度：

點擊下載本文 文檔為doc格式

標簽： html5 放大鏡示例

熱門焦點

JavaScript+HTML5 canvas實現放大鏡效果完整示例

JavaScript+HTML5 canvas實現放大鏡效果完整示例

JavaScript+HTML5 canvas實現放大鏡效果完整示例

最新推薦

猜你喜歡

熱門推薦