<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title>倒影</title>
     <style>
         body{background:#000;}
         canvas{background: #fff; margin-left:500px;}
     </style>
     <script>
         window.onload = function(){
             var cvs = document.getElementById('canvas1');
             var cxt = cvs.getContext('2d');

             var oImg = new Image();
             oImg.src = '1.jpg';
             oImg.onload = function(){
                 cxt.drawImage(this,0,0);
                 var imgData = cxt.getImageData(0,0,oImg.width,oImg.height);
                 var newImgData = cxt.createImageData(oImg.width,oImg.height);//新建ImgData对象

                 for(var j=0;j<oImg.height;j++){
                     for(var i=0;i<oImg.width;i++){
                         var res = getXY(imgData,i,j);//获取j行上某点的色彩
                         setXY(newImgData,i,oImg.height-j,res);//将该色彩设置给其倒影
                     }
                 }

                 cxt.putImageData(newImgData,0,oImg.height+50);
             }
         }
 　　　　//获取(x,y)点的色彩信息
         function getXY(imgData,x,y){
             var result = [];
             result.push(imgData.data[(imgData.width*y+x)*4]);
             result.push(imgData.data[(imgData.width*y+x)*4+1]);
             result.push(imgData.data[(imgData.width*y+x)*4+2]);
             result.push(imgData.data[(imgData.width*y+x)*4+3]);
             return result;
         }
 　　　　　//设置(x,y)点的色彩信息
         function setXY(imgData,x,y,colors){
             imgData.data[(imgData.width*y+x)*4] = colors[0];
             imgData.data[(imgData.width*y+x)*4+1] = colors[1];
             imgData.data[(imgData.width*y+x)*4+2] = colors[2];
             imgData.data[(imgData.width*y+x)*4+3] = colors[3];
         }

     </script>

 </head>
 <body>
 <canvas id="canvas1" width="500" height="500"></canvas>

 </body>
 </html>

HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影的更多相关文章

  1. HTML5自学笔记[ 15 ]canvas绘图实例之钟表

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  7. HTML5自学笔记[ 24 ]canvas绘图之星空草地

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

  9. HTML5自学笔记[ 16 ]canvas绘图基础3

    canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...

随机推荐

  1. Cache缓存对象缓存对象

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoCache.aspx ...

  2. ：判断101-200之间有多少个素数，并输出所有素数。 程序分析：判断素数的方法：用一个数分别去除2到sqrt(这个数)，如果能被整除， 则表明此数不是素数，反之是素数。

    package C; public class Sushu { public static void main(String[] args) { int sum=0; for (int i = 101 ...

  3. BZOJ 3241: [Noi2013]书法家

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3241 题意: 思路:把每个字母分成三部分,两个字母之间还有空的列,所以我一共设了11个状态 ...

  4. ThinkPHP 模型(Model)命名规范

    一个小问题搞了好久:如果数据库的表名中有下划线,那么在用thinkphp做自动完成时注意Model类的命名要变成驼峰法,文件名和类名都要变.( 另外注意:只有使用create方法创建数据时才能调用到自 ...

  5. V-rep学习笔记：曲柄摇杆机构

    在ADAMS中创建一个曲柄摇杆机构很方便,但是V-rep中建模就比较麻烦.下面将自己在V-rep中建立曲柄摇杆机构模型的过程记录下来(由于对V-rep不是很熟,可能会有一些错误,只能等以后发现了再改进 ...

  6. BSGS模版 a^x=b ( mod c)

    kuangbin的BSGS: c为素数: #define MOD 76543 int hs[MOD],head[MOD],next[MOD],id[MOD],top; void insert(int ...

  7. JS学习笔记（三） 对象

    参考资料: 1. http://www.w3school.com.cn/js/js_objects.asp ☂ 知识点: ☞ Javascript中的所有事物都是对象. ☞ Javascript是基于 ...

  8. 2013 Multi-University Training Contest 9

    HDU-4687 Boke and Tsukkomi 题意:给定一个简单图,询问哪些边如果选择的话会使得最大的连边数减少. 解法:套用一般图的最大匹配算法(带花树)先算出最大匹配数,然后枚举一条边被选 ...

  9. Oracle PLSQL语句实例

    /** * plsql:某个项目对效率要求比较高的时候用,一般不用,大多数项目写的是夸数据库平台的,用不上. * pssql大多数能做的东西,java都能替代它.在某些特殊的地方要求用plsql的时候 ...

  10. C#操作Excel数据增删改查(转)

    C#操作Excel数据增删改查. 首先创建ExcelDB.xlsx文件,并添加两张工作表. 工作表1: UserInfo表,字段:UserId.UserName.Age.Address.CreateT ...