<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload = function ()

{

    var oc = document.getElementById('c1');

    var ogc = oc.getContext('2d');

    var yimg = new Image();

    yimg.onload = function ()

    {

        draw(this);

    }

    yimg.src = 'img/5-5.jpg';

    function draw(obj)

    {

        oc.width = obj.width;

        oc.height = obj.height*2;

        ogc.drawImage(obj,0,0);

        var oimg = ogc.getImageData(0,0,obj.width,obj.height);

        var w = oimg.width;

        var h = oimg.height;

        var newimg = ogc.createImageData(obj.width,obj.height);

        for(var i = 0; i < h; i++)

        {

            for(var j = 0; j < w; j++)

            {

                var color = getXY(oimg,j,i)

                var result = [];

                result[0] = 255 - color[0];

                result[1] = 255 - color[1];

                result[2] = 255 - color[2];

                result[3] = 255;

                setXY(newimg,j,h-i,result);

            }

        }

        ogc.putImageData(newimg,0,obj.height);

    }

    function getXY(obj,x,y)

    {

        var w = obj.width;

        var h = obj.height;

        var d = obj.data;

        var color = [];

        color[0] = d[ 4*(y*w+x)];

        color[1] = d[ 4*(y*w+x) +1];

        color[2] = d[ 4*(y*w+x) +2];

        color[3] = d[ 4*(y*w+x) +3];

        return color;

    }

    function setXY(obj,x,y,color)

    {

        var w = obj.width;

        var h = obj.height;

        var d = obj.data;

        d[ 4*(y*w+x)] = color[0];

        d[ 4*(y*w+x) +1] = color[1];

        d[ 4*(y*w+x) +2] = color[2];

        d[ 4*(y*w+x) +3] = color[3];

    }

}

</script>

<style>

body{

    background:pink;

    }

#c1{

    background:white;

    }

</style>

</head>

<body>

<canvas id="c1" width="400" height="800"></canvas>

</body>

</html>

html5 canvas图片翻转的更多相关文章

  1. 导出HTML5 Canvas图片并上传服务器功能

    这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

  2. HTML5 Canvas图片操作简单实例1

    1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...

  3. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. html5 canvas图片渐变

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

  6. html5 canvas图片反色

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

  7. html5 canvas图片马赛克

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

  8. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  9. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

随机推荐

  1. debian系统安装Thinkpad T410s的无线网卡驱动：centrino Advanced-N 6200 2x2 AGN

    前几天搞到手一台小黑:T410s.自带系统是win7.由于想学习debian,所以就搞成了双系统,安装了一套debian 6.0. 可是让我困惑的是在debian下,无法使用T410s的网卡,因为默认 ...

  2. 重新安装sqlyog时备份数据库链接列表的方法

    一般在本机C:\Documents and Settings\Administrator\Application Data\SQLyog这个目录下有个sqlyog.ini文件.把这个文件备份一下就ok ...

  3. 总结Selenium自动化测试方法（五）自动化测试框架

    五.自动化测试框架 1.单元测试框架unittest class loginTests(unittest.TestCase): ①开始的初始化部分 @classmethod def setUpClas ...

  4. 编写类String的构造函数、析构函数和赋值函数

    已知类String的原型为: class String {   public:  String(const char *str = NULL); // 普通构造函数  String(const Str ...

  5. gdb mysq

    1.找到mysqld的id [root@default-tpl ~]# ps aux|grep mysqldroot 5006 0.0 0.0 103252 796 pts/6 S+ 15:15 0: ...

  6. hdu 4622 Reincarnation trie树+树状数组/dp

    题意:给你一个字符串和m个询问,问你l,r这个区间内出现过多少字串. 连接:http://acm.hdu.edu.cn/showproblem.php?pid=4622 网上也有用后缀数组搞得. 思路 ...

  7. 【第二篇】.NET用NPOI读取Excel表格并在页面预览

    博主用的是npoi2.0.1,支持.xls也支持.xlsx 直接上代码吧. <table class="table table-bordered table-striped" ...

  8. gcc g++ 参数介绍

    C和C++ 编译器是集成的.他们都要用四个步骤中的一个或多个处理输入文件: 预处理 (preprocessing),编译(compilation),汇编(assembly)和连接(linking).源 ...

  9. [ ] 字符组(Character Classes) (转)

    []能够匹配所包含的一系列字符中的任意一个.需要注意的是,[]虽然能匹配其中的任意一个字符,但匹配的结果只能是一个字符,不是多个. 例如[abc]表示字符“a”或“b”或“c”. []支持用连字符“- ...

  10. 常见SQLException异常

    ORA-00904:  invalid column name 无效列名 ORA-00942:  table or view does not exist 表或者视图不存在 ORA-01400:  c ...