html5 反色+倒影+透明度

分享到:

<body>
    <canvas id="c1" width="800" height="400">
    </canvas>
    <script type="text/javascript">
        var oC = document.getElementById("c1");
        var oGC = oC.getContext("2d");
        var img = new Image();
        img.onload = function () {
            draw(this);
        }
        img.src = '3.png';
        function draw(obj) {
            oGC.drawImage(obj, 0, 0);
            var oImg = oGC.getImageData(0, 0, obj.width, obj.height);
            var nImg = oGC.createImageData(obj.width, obj.height);
            for (var i = 0; i < oImg.width; i++) {
                for (var j = 0; j < oImg.height; j++) {
                    var cor = getXY(oImg, i, j);
                    cor[0] = 255 - cor[0];
                    cor[1] = 255 - cor[1];
                    cor[2] = 255 - cor[2];
                    cor[3] = 255 * j / oImg.height;
                    setXY(nImg, i, oImg.height - j, cor);
                }
            }
            oGC.putImageData(nImg, 0, oImg.height);
        }
        //获取指定位置的像素值
        function getXY(obj, x, y) {
            var color = [];
            color[0] = obj.data[4 * (obj.width * y + x)];
            color[1] = obj.data[4 * (obj.width * y + x) + 1];
            color[2] = obj.data[4 * (obj.width * y + x) + 2];
            color[3] = obj.data[4 * (obj.width * y + x) + 3];
            return color;
        }
        //设置指定位置的像素值
        function setXY(obj, x, y, color) {
            obj.data[4 * (obj.width * y + x)] = color[0];
            obj.data[4 * (obj.width * y + x) + 1] = color[1];
            obj.data[4 * (obj.width * y + x) + 2] = color[2];
            obj.data[4 * (obj.width * y + x) + 3] = color[3];
        }
    </script>
</body>

昵    称:
验证码:

相关文档:

  • Qt 5.4正式发布!引入WP,支持HTML5混合开发
    北京时间12月11日消息,Digia全资子公司TheQtCompany在其官方博客上宣布,正式发布Qt5.4,支持HTML5混合开发,引入对于WindowsPhone的支持,以...
  • html5 渐变颜色
    渐变分为:线性渐变和放射性渐变 线性渐变如下:<body><canvasid="c1"width="400"height="400"></canvas><scripttype="text/javascript">windo...
  • APP定制 HTML5开发 UNITY3D游戏开发 Mac软件外包
    APP定制HTML5开发UNITY3D游戏开发Mac软件外包 app软件开发带给企业哪些价值? APP现在对于很多人都不在是陌生的词语,而是用户智能时代的...
  • Html5 Geolocation 地理定位
    HTML5 Geolocation(地理定位)用于定位用户的位置。HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。...
  • Html5播放视频和音乐
    HTML5 提供了展示视频的标准大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。...
  • HTML <input> type 属性
    http://www.w3cschool.cc/tags/att-input-type.html HTML<input>type属性 HTML<input>标签 实例 带有两种不同输入类型的HTML表单,text和submit: <fo...
  • sharepoint站点获取用户打开和下载文档操作的信息
    思路1:在你的文档库列表上添加事件处理代码,每次打开文档执行代码,代码内容是点击次数字段加1,如果是下载的话,就是下载成功...
  • HTML5 之文件操作(file)
    前言 在HTML文档中<inputtype="file">标签每出现一次,一个FileUpload对象就会被创建。 该元素包含一个文本输入字段,用来输入文件名,...
  • Html的<meta>标签使用方法及用例
    浏览器支持 所有浏览器都支持<meta>标签。 定义和用法 <meta>元素可提供有关页面的元信息(meta-information),比如针对搜索引擎...
  • HTML5 LocalStorage 本地存储
    localStorage和sessionStorage一样都是用来存储客户端临时信息的对象,他们均只能存储字符串类型的对象localStorage生命周期是永久,这意味着除...
  • html5 canvas 移动小方块
    <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <style> body{ background:pink; } #c...
  • 使用Bootstrap框架的HTML5页面模板
    1<!DOCTYPEhtml> 2<htmllang="en"> 3<head> 4<metacharset="UTF-8"> 5<metaname="viewport"content="width=device-width,initial-s...
  • HTML5+NodeJs实现WebSocket即时通讯
    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工...
  • 使用pjax实现类似github无刷新更改页面url
    pjax=pushState+ajax,相信用过github的同学都知道,github部分页面采用了pjax这个项目来实现ajax无刷新加载的同时改变页面url。一起来学习一下...
  • [html5/css3] html5 拖放API
    <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>html5拖放API</title> <scripttype="text/javascript">...
  • 让所有浏览器支持HTML5 video视频标签
    让所有浏览器支持HTML5video视频标签 一、前面的唠叨 我记得就是前几个月吧,有条消息说YouTube支持了HTML5视频嵌入标签video,好吧,我...
  • 一个老站长对HTML5认识
    新的一年开始,各个领域都在悄悄发生着一些变化。在移动互联网领域也在发生着很多变化,其中HTML5的技术在多年的实践和国内巨头公...
  • 基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效
    今天给大家分享一款效果非常炫酷的HTML5SVG和CSS3蹦床式图片切换特效插件。该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床...
  • 第一章 Hello World – A Cross-platform Game
    本章通过制作跨平台的Helloworld来学习: 跨平台游戏背后的理论 Cocos2d-JS安装 Cocos2d-JS项目文件一览 场景(Scene)、图层(Layers)、精灵...
  • 基于html5实现的愤怒的小鸟网页游戏
    之前给大家分享一款基于html5canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏。这款游戏适用浏...