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. windows MySQL 5.7 导出表方法记录

    首先修改MySQL配置 找到mysql安装目录下的 my.ini 文件,将 secure-file-priv = "C:/ProgramData/MySQL/MySQL Server 5.7 ...

  2. python赋值和拷贝----一切皆对象，参数皆引用

    摘要: 1 python中的一切事物皆为对象,并且规定参数的传递都是对象的引用. 2  python参数传递都是"传对象引用"方式.实际上相当于c++中传值和传引用的结合. 3 如 ...

  3. 注解用法详解——@SuppressWarnings

    一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“感叹号”就严重阻碍了我们判断该行是否设置的断点了.这时我们可以在方法前添加 @SuppressWar ...

  4. android 6.0获取权限

    Android版本升到6.0后最坑的就是权限问题,以下是我参考大神一个权限管理工具类,希望对大家有用 PermissionUtils.java import android.Manifest; imp ...

  5. 0115percona-toolkit安装教程

    一.percona-toolkit简介percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: 检查master和slav ...

  6. Android系统属性SystemProperties分析

    下面这几个博客总结的不错,有空看下: http://www.cnblogs.com/bastard/archive/2012/10/11/2720314.html http://blog.csdn.n ...

  7. SQL Server--导入和导出向导

    作用:创建一个只需要最少的转换就可以快速导入或导出数据的包 操作步骤: 1 打开打入和导出向导方式 有四种方式 1)在SSMS(SQL Server Management Studio)中,右击目标数 ...

  8. Nginx负载均衡策略

    目前nginx负载均衡支持的5种方式的分配 1. 轮询 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. upstream backserver { server ...

  9. Redis数据备份和重启恢复

    一.对Redis持久化的探讨与理解 目前Redis持久化的方式有两种: RDB 和 AOF 首先,我们应该明确持久化的数据有什么用,答案是用于重启后的数据恢复. Redis是一个内存数据库,无论是RD ...

  10. Lumen 配置、重写、404错误等

    1.权限是否有设置为777: 2.app key是否有设置: 3.apache下是否有开启重写,a2enmod: 4.nginx下server的location是否配置正确,重写规则有没添加,rout ...