歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

HTML5 canvas做的一個圖片局部放大的效果

看到老外做HTML5的越來越多了,今天看到一個其中用HTML5做的效果不錯, 是在canvas上畫的圈,做放大器,並且監視了鼠標的相關事件,代碼如下:

HTML部分

  1. <!DOCTYPE html>   
  2. <html lang="en" >   
  3.     <head>   
  4.         <meta charset="utf-8" />   
  5.         <title>HTML5 canvas - Image zoomer | muu.cc</title>   
  6.         <link href="css/main.css" rel="stylesheet" type="text/css" />   
  7.         <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>   
  8.         <script type="text/javascript" src="js/script.js"></script>   
  9.     </head>   
  10.     <body>   
  11.         <div class="container">   
  12.             <canvas id="panel" width="800" height="533"></canvas>   
  13.         </div>   
  14.         <footer>   
  15.             <h2>HTML5 canvas - Image zoomer</h2>   
  16.             <a href="http://www.muu.cc" class="stuts">Back to original MUU.cc on <span>MUU CC</span></a> 
  17.         </footer>   
  18.     </body>   
  19. </html>  

CSS部分:

  1. *{   
  2.     margin:0;   
  3.     padding:0;   
  4. }   
  5.   
  6. body {   
  7.     background-color:#bababa;   
  8.     color:#fff;   
  9.     font:14px/1.3 Arial,sans-serif;   
  10. }   
  11.   
  12. footer {   
  13.     background-color:#212121;   
  14.     bottom:0;   
  15.     box-shadow: 0 -1px 2px #111111;   
  16.     display:block;   
  17.     height:70px;   
  18.     left:0;   
  19.     position:fixed;   
  20.     width:100%;   
  21.     z-index:100;   
  22. }   
  23.   
  24. footer h2{   
  25.     font-size:22px;   
  26.     font-weight:normal;   
  27.     left:50%;   
  28.     margin-left:-400px;   
  29.     padding:22px 0;   
  30.     position:absolute;   
  31.     width:540px;   
  32. }   
  33.   
  34. footer a.stuts,a.stuts:visited{   
  35.     border:none;   
  36.     text-decoration:none;   
  37.     color:#fcfcfc;   
  38.     font-size:14px;   
  39.     left:50%;   
  40.     line-height:31px;   
  41.     margin:23px 0 0 110px;   
  42.     position:absolute;   
  43.     top:0;   
  44. }   
  45.   
  46. footer .stuts span {   
  47.     font-size:22px;   
  48.     font-weight:bold;   
  49.     margin-left:5px;   
  50. }   
  51.   
  52. .container {   
  53.     color:#000;   
  54.     margin:20px auto;   
  55.     position:relative;   
  56.     width:800px;   
  57. }   
  58.   
  59. #panel {   
  60.     border:1px #000 solid;   
  61.     box-shadow:4px 6px 6px #444444;   
  62.     cursor:crosshair;   
  63. }  

script.js

  1. // variables   
  2. var canvas, ctx;   
  3. var image;   
  4. var iMouseX, iMouseY = 1;   
  5. var bMouseDown = false;   
  6. var iZoomRadius = 100;   
  7. var iZoomPower = 2;   
  8.   
  9. // drawing functions   
  10. function clear() { // clear canvas function   
  11.     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);   
  12. }   
  13.   
  14. function drawScene() { // main drawScene function   
  15.     clear(); // clear canvas   
  16.   
  17.     if (bMouseDown) { // drawing zoom area   
  18.         ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);   
  19.         ctx.globalCompositeOperation = 'destination-atop';   
  20.   
  21.         var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius);   
  22.         oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)");   
  23.         oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)");   
  24.         ctx.fillStyle = oGrd;   
  25.         ctx.beginPath();   
  26.         ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true);   
  27.         ctx.closePath();   
  28.         ctx.fill();   
  29.     }   
  30.   
  31.     // draw source image   
  32.     ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);   
  33. }   
  34.   
  35. $(function(){   
  36.     // loading source image   
  37.     image = new Image();   
  38.     image.onload = function () {   
  39.     }   
  40.     image.src = 'images/image.jpg';   
  41.   
  42.     // creating canvas object   
  43.     canvas = document.getElementById('panel');   
  44.     ctx = canvas.getContext('2d');   
  45.   
  46.     $('#panel').mousemove(function(e) { // mouse move handler   
  47.         var canvasOffset = $(canvas).offset();   
  48.         iMouseX = Math.floor(e.pageX - canvasOffset.left);   
  49.         iMouseY = Math.floor(e.pageY - canvasOffset.top);   
  50.     });   
  51.   
  52.     $('#panel').mousedown(function(e) { // binding mousedown event   
  53.         bMouseDown = true;   
  54.     });   
  55.   
  56.     $('#panel').mouseup(function(e) { // binding mouseup event   
  57.         bMouseDown = false;   
  58.     });   
  59.   
  60.     setInterval(drawScene, 30); // loop drawScene   
  61. });   

一個在線效果在:  

http://www.muu.cc/html5/Imagezoomer/index.html

要用chrome,firefox,safri等浏覽器看 

 

 

 

 

 

 

 

 

 

 

 

Linux編程

用HTML5 Canvas 做擦除及擴散效果

Android 實現圖片加載效果

如何將Canvas中內容保存為圖片

在OpenCV中鼠標移動區域局部放大

HTML5 利用canvas API 展示陰影效果

Android Gallery實現選中放大的效果

Android 圖片放大縮小

HTML5使用canvas畫圖時，圖片被自動放大模糊的問題.....

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved