HTML5 canvas做的一个图片局部放大的效果

HTML5 canvas做的一个图片局部放大的效果

看到老外做HTML5的越来越多了,今天看到一个其中用HTML5做的效果不错, 是在canvas上画的圈,做放大器,并且监视了鼠标的相关事件,代码如下:

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等浏览器看