ImageData中的元素反转颜色 255-data[i,i+1,i+2]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>converse color</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='600'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');

    var img = new Image();

    img.src = 'face.jpg';

    img.onload = function() {

        ctx.drawImage(img, 0, 0);

        var imgData = ctx.getImageData(0, 0, 250, 250);

        var pixels = imgData.data;

        for (var i = 0, n = pixels.length; i < n; i += 4) {

            pixels[i] = 255 - pixels[i];

            pixels[i + 1] = 255 - pixels[i + 1];

            pixels[i + 2] = 255 - pixels[i + 2];

        }

        ctx.putImageData(imgData, 250, 0);

    };

    </script>

</body>

</html>

Canvas 颜色反转的更多相关文章

  1. HTML5、canvas颜色拾取器

    效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  2. 大名鼎鼎的红黑树，你get了么？2-3树 绝对平衡 右旋转 左旋转 颜色反转

    前言 11.1新的一月加油!这个购物狂欢的季节,一看,已囊中羞涩!赶紧来恶补一下红黑树和2-3树吧!红黑树真的算是大名鼎鼎了吧?即使你不了解它,但一定听过吧?下面跟随我来揭开神秘的面纱吧! 一.2-3 ...

  3. win7颜色反转

    win7屏幕太亮,整天看电脑看的头疼 利用放大镜实现颜色反转 打开控制面板 //也可'开始'处直接输入输入放大镜进入 选择轻松访问 启用放大镜 选择设置 启用颜色反转 win+'+'增加放大镜的放大倍 ...

  4. Java实现-2016百度秋招(颜色反转、相似字符串)

    1.颜色反转 题目描述: 在 Web 开发中,通常使用 16 进制 RGB 表示一个颜色.例 如 #0000FF 表示蓝色,#FF7F50 表示珊瑚红.在这道题中,我们要求把给定的一种颜色取反,方法是 ...

  5. HTML5 Canvas 颜色填充学习

    ---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...

  6. 了解canvas

    目录 [1]HTML属性[2]CSS样式 [3]API 坐标 填充和描边 阴影 绘制矩形 绘制路径 绘制文本 绘制图像 使用图像 变换 合成 [4]DEMO 前面的话 canvas元素是HTML5最受 ...

  7. HTML 5 canvas —— 基本语法

    目录 简述 canvas 基础 2D context API 基本线条 路径 插入图像 像素级操作 文字 阴影 颜色渐变 小节 简述 HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 ca ...

  8. canvas图形处理和进阶用法

    前面的话 上一篇博客介绍了canvas基础用法,本文将更进一步,介绍canvas的图形处理和进阶用法 图形变换 图形变换是指用数学方法调整所绘形状的物理属性,其实质是坐标变形.所有的变换都依赖于后台的 ...

  9. canvas使用3

    颜色合成 globalCompositeOperation 属性: ? 1 2 3 4 5 6 7 8 9 10 11 //先绘制一个图形. ctx.fillStyle = "#00ff00 ...

随机推荐

  1. webpack.config.js 参数简单了解

    webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块. var webpack = require('webpack'); module.exp ...

  2. php自学笔记3

    -------补充--------建议定义常量时,判断常量名是否被定义,用defined()判断,返回布尔型if(!defined("POEM")){//没定义过 define(& ...

  3. nginx 内存池分析

    最近nginx的源码刚好研究到内存池,这儿就看下nginx内存池的相关的东西. 一,为什么要使用内存池 大多数的解释不外乎提升程序的处理性能及减小内存中的碎片,对于性能优化这点主要体现在: (1)系统 ...

  4. fixed定位与absolute定位

    相同点: 1.fixed定位和absolute定位都是绝对定位 2.fixed定位和absolute定位都脱离了标准文档流, 3.未设置偏移量时,都定位在父元素的左上角 tip:元素设置相对定位或绝对 ...

  5. The 2014 ACM-ICPC Asia Regional Anshan Online

    [A]无向图的双联通子图计数.DP+状态压缩 [B]计算几何(点的旋转) [C]DP+状态压缩 [D]离散数学+DP (感觉可出) [E]概率DP [F]LCT模板题(-_-///LCT是啥!!!!) ...

  6. 从零开始HTML

      1.属性 HTML 标签可以拥有属性.属性提供了有关 HTML 元素的更多的信息.属性总是以名称/值对的形式出现,比如:name="value". 属性总是在 HTML 元素的 ...

  7. HDU 4169 UVALive 5741 Wealthy Family

    树形背包.DP递推的思路很简单.... 但是由于节点有15万个,先不论空间复杂度,这样开dp数组 dp[150000+10][300+10],如果初始化是memset(dp,-1,sizeof dp) ...

  8. CDbConnection failed to open the DB connection: SQLSTATE[28000] [1045] Access denied for user 'root'@'localhost' (using password: YES)

    连接mysql出错:CDbConnection failed to open the DB connection: SQLSTATE[28000] [1045] Access denied for u ...

  9. VC2010编写Dll文件（转）

    源:VC2010编写Dll文件 1. 打开VS2010[Flie / New / Project / Visual C++ / Win32 / Win32 Console Application]在下 ...

  10. 起步X5 的铛铛的安装部署过程

    (2017年1月)主要资料: 1.铛铛的IM Server即时通信服务使用 actor   https://github.com/actorapp/actor-platform ,开发者网站是:htt ...