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. WPF教程：依赖属性

    一.什么是依赖属性 依赖属性就是一种自己可以没有值,并且可以通过绑定从其他数据源获取值.依赖属性可支持WPF中的样式设置.数据绑定.继承.动画及默认值. 将所有的属性都设置为依赖属性并不总是正确的解决 ...

  2. 学习Redis从这里开始

    本文主要内容 Redis与其他软件的相同之处和不同之处 Redis的用法 使用Python示例代码与Redis进行简单的互动 使用Redis解决实际问题 Redis是一个远程内存数据库,它不仅性能强劲 ...

  3. EF 报【序列包含一个以上的元素】解决办法

    1.检查模型是否存在重复的字段,eg: public class AggregateRoot { public System.Guid Guid { get; set; } } public part ...

  4. [DNS]ACL、also-notify、视图服务器及安全设置

    1. ACL :访问控制列表放在named.conf的头部,如果acl的内容太多,可以另创建一个文件,将acl放在该文件中,再在主配置文件named.conf用include 将文件加载进来(记得放在 ...

  5. python----mysql链接汉字编码的问题

    解决python连接mysql,UTF-8乱码问题 1.  Python文件设置编码 utf-8 (文件前面加上 #encoding=UTF-8)     2. MySQL数据库charset=utf ...

  6. Arduino线程库ProtoThreads

    参考: Arduino线程库ProtoThreads 一个“蝇量级” C 语言协程库

  7. NSString的几个方法（rangeOfString，hasPrefix，hasSuffix，改变大小写...）

    - (NSRange)rangeOfString:(NSString *)searchString;//查找字符串中是包涵在某个字符串,并返回其开始位置和长度 例: NSRange range = [ ...

  8. JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  9. 更多文章请关注公众号：FullStackPlan 或前往个人主页：www.linbingdong.com

    个人主页:www.linbingdong.com 扫一扫关注公众号: FullStackPlan 获取更多干货哦~

  10. iOS开发——Reachability和AFNetworking判断网络连接状态

    一.Reachability // 监听网络状态改变的通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selec ...