html5学习-图像图像倒影

继续学习中。。。。。，html5 图像倒影：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 
 8 #can{ background:#EBEBEB}
 9 
10 </style>
11 
12 </head>
13 <body>
14  <canvas id="can" width="800" height="600"></canvas>
15 <img src="images/2.jpg" style="display:none" />
16 
17 </body>
18 
19 <script>
20 
21  var canid=document.getElementById("can");
22  var imgobj=document.getElementsByTagName("img")[0];
23  var can=canid.getContext("2d");
24 
25 drawB();
26 
27 function  drawB(num,srad,drad){
28         can.shadowColor="#cccccc";
29       can.shadowBlur=5;
30       can.shadowOffsetX=5;
31       can.shadowOffsetY=5;
32       can.drawImage(imgobj,0,0,200,250);
33 
34       
35       var sarr=[];
36 
37       var imgData=can.getImageData(0,0,200,250);
38       var imgDatas=can.createImageData(imgData);
39 
40           for(var i=0;i<imgData.height;i++){
41                   
42                 for(var j=0;j<imgData.width;j++){
43                     
44                     imgDatas.data[i*(4*imgData.width)+j*4+0]=imgData.data[(imgData.height-i)*(4*imgData.width)+j*4+0];
45                     imgDatas.data[i*(4*imgData.width)+j*4+1]=imgData.data[(imgData.height-i)*(4*imgData.width)+j*4+1];
46                     imgDatas.data[i*(4*imgData.width)+j*4+2]=imgData.data[(imgData.height-i)*(4*imgData.width)+j*4+2];
47                     imgDatas.data[i*(4*imgData.width)+j*4+3]=imgData.data[(imgData.height-i)*(4*imgData.width)+j*4+3]-i;
48     
49                 }
50           }
51           
52       can.putImageData(imgDatas,0,250)
53         
54         
55 }
56 
57 </script>
58 
59 
60 </html>

 

posted @ 2013-11-14 17:31  梦飞无颜  阅读(340)  评论(0)  编辑  收藏  举报