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. composer 的快速安装

    Packagist 镜像 请各位使用本镜像的同学注意: 本镜像已经依照 composer 官方的数据源安全策略完全升级并支持 https 协议!请各位同学 按照下面所示的两个方法将 http://pa ...

  2. win7 安装 vagrant + centos + virtualbox

    Vagrant 是一款用来构建虚拟开发环境的工具,非常适合 php/python/ruby/java 这类语言开发 web 应用,“代码在我机子上运行没有问题”这种说辞将成为历史. 我的是在win7系 ...

  3. Android音频系统之音频框架

    1.1 音频框架 转载请注明,From LXS, http://blog.csdn.net/uiop78uiop78/article/details/8796492 Android的音频系统在很长一段 ...

  4. phpstorm 正则匹配删除注释行（替换注释行为空行）

    使用phpstorm 来编写php 和javascript 代码,感觉还是不错的,用得也很舒服. 遇到了一个需求,有时候在阅读框架源代码的时候 , 想过滤(删除)掉源代码中的注释行,如果手动逐行删除显 ...

  5. codis 新版本 CodisLabs 编译安装

    codis 3.0 版本编译安装 # 首先安装 go 语言 wget https://storage.googleapis.com/golang/go1.4.2.linux-amd64.tar.gz ...

  6. (中等) POJ 3660 Cow Contest，Floyd。

    Description N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming con ...

  7. Linux监控体系

    监控体系 zabbix 博客:www.abcdocker.com 微信公众号:abcdocker 笔者QQ:381493251 Abcdocker交流群:454666672 如果遇到什么问题可以进群询 ...

  8. python mysql 2014 Commands out of sync; you can't run this command now

    这个问题出现再 mysql和c  的api. 简单的解决方法是不使用api直接把整个连接和命令传过去. 例如,cmd = 'mysql -h 192.168.32.210 -P 3316 -u bfd ...

  9. Unity3D ——强大的跨平台3D游戏开发工具（三）

    第四章 为地形添加水源.水流以及水下的模糊效果 制作好了地形的各种效果,接下来我们给场景添加一些水效果,使场景更加丰富. 第一步:添加水面 由于我在上一次的地形创作中就已经在山峰之间制作了一块洼地,它 ...

  10. Java的进制转换操作（十进制、十六进制、二进制）

    2014-05-06 17:34 吴文付 最近由于工作上的需要,遇到进制转换的问题.涉及到的进制主要是 十进制,十六进制,二进制中间的转换. 这里整理一下.具体的计划为:封装一个转换类,一个测试类. ...