html5学习-图像图像倒影

HTML5 Canvas 图像倒影效果

最新推荐文章于 2021-06-16 18:57:44 发布

转载最新推荐文章于 2021-06-16 18:57:44 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chaoming/p/3423716.html

本文介绍如何使用HTML5的Canvas API实现图像倒影效果。通过获取图像数据并进行翻转处理，最终绘制到Canvas上形成倒影。代码详细展示了如何设置阴影及翻转像素数据。

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

转载于:https://www.cnblogs.com/chaoming/p/3423716.html