<!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. 【leetcode❤python】231. Power of Two

    #-*- coding: UTF-8 -*- class Solution(object):    def isPowerOfTwo(self, n):        if(n<=0):     ...

  2. C语言实现单向链表及其各种排序（含快排，选择，插入，冒泡）

    #include<stdio.h> #include<malloc.h> #define LEN sizeof(struct Student) struct Student / ...

  3. Java编程思想读书笔记

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. 部署PDA程序的时候存储不足的解决办法

    通常Windows Mobile的存储空间分为程序内存和存储内存,默认都比较小,当程序比较大的时候可能无法正常部署到设备上面,针对此问题可采用如下办法解决:1.通过VS修改,工具--选项--设备--选 ...

  5. CUBRID学习笔记 24 数据类型1

    ---恢复内容开始--- 一 数字类型  注意小数的四舍五入问题 1数字型 Type Bytes Mix Max Exact/approx. SHORTSMALLINT 2 -32,768 32,76 ...

  6. HDU 5724 Chess（国际象棋）

    HDU 5724 Chess(国际象棋) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  7. Codeforces Round #279 (Div. 2) C. Hacking Cypher 前缀+后缀

    C. Hacking Cypher time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  8. mypc--------------->lspci,lsusb,meminfo cpuinfo ioports filesystems interrupts mounts net partitions pagetypeinfo slabinfo timer_list uptime version zoneinfo 等配置信息

    [user@username home]$ lspci00:00.0 Host bridge: Intel Corporation 4th Gen Core Processor DRAM Contro ...

  9. mysql概要（十四）索引

    1.索引是对数据库数据建立目录加快了查询速度.索引分为哈希索引和二叉树索引 (大数据量转移,如果表中带有大量字段索引,进行数据导入时,建议先去掉索引导入数据再统一加入索引,减少索引计算量) 2.索引原 ...

  10. web前端学习(一） html+js实现文本框背景及只读属性修改

    因为工作需求接触了html+javascript,对于从事嵌入式开发,一直接触c和汇编的我,感觉这种语言是一个的全新的领域,宽松的语法要求,等同于文本逻辑的输出,当然我并不认为它简单,错误检查的缺少让 ...