<!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. leetcode：Valid Palindrome

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  2. STL头文件

    #include <iostream>标准输入输出cin cout等 #include <algorithm> 算法库 如sort find等 #include <vec ...

  3. JUnit 4

    本文是转载的, 主要介绍 Junit 4 ( 搭建在 eclipse 中 ) JUnit4 初体验 Eclipse: 下载 Ant, 基于java的开源构建工具, 你可以在 http://ant.ap ...

  4. UI开发中的Unit test新工具：网页抓屏比较

    在UI开发中,判断是否正常往往需要看到UI长的模样,所以一般的Unit test无法胜任. 现在有一款通过抓屏而后相素比较的方法,或许对于UI自动化测试能够起到比较好的改进效果. 具体请参见:http ...

  5. LA 3213 Ancient Cipher

    开始我理解错题意了,应该是这样理解的: 字符串1进行映射后可以做一个置换,若置换后与字符串2相同,也是输出YES的 比如ABCA 和 DDEF 因此我们需要做的就是统计有多少类字母,每一类有多少个,如 ...

  6. ASP.NET 4的Demo实践:URL路由改进支持

    从.NET框架3.5 SP1开始,微软推出了ASP.NET路由支持,从而实现了特定资源的URL与其对应的Web服务器上的物理文件之间的彻底解耦.借助于ASP.NET路由支持,开发人员可以定义一组路由规 ...

  7. Windows下PhpStorm结合WAMP开发Phalcon应用的配置

    最近要利用Phalcon框架开发PHP应用,因为以前基本没接触过PHP更没用过PHP框架,结果整环境整IDE配置什么的花了好长时间 学习慕课网上的PHP入门教程安装了WAMP(windows+apac ...

  8. 【解题报告】POJ-1106 Transmitters

    原题地址:http://poj.org/problem?id=1106 题目大意: 给定一些平面的点以及一个圆心和半径,过圆心作一个半圆,求点在半圆中点最多多少个. 解题思路: 首先将给定点中和圆心的 ...

  9. Oracle 11g对大表中添加DEFAULT值的NOT NULL字段速度有大幅度的提升

    在一张2000万的表上增加了一个字段并字段一个默认值,执行这条语句(alter table tablename add new_col default ‘col’)一个小时没有执行完,问我有没有其他解 ...

  10. InnoDB: Error: could not open single-table tablespace file

    找到\mysql\bin下面的my.ini中mysqld项目后添加 innodb_force_recovery = 1