继续学习中。。。。。，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>