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. USACO Section 1.1 Your Ride Is Here 解题报告

    题目 问题描述 将字符串转变为数字,字母A对应的值为1,依次对应,字母Z对应的值为26.现在有一个字符串,将其中的每个字符转变为数字之后进行累乘,最终的结果对47求余数. 题目给你两个字符串,其中的字 ...

  2. Varnish Cache

    1 Varnish简介 Varnish是高性能且开源的反向代理服务器和HTTP加速器(cache server).其开发者Poul-Henning Kamp是FreeBSD核心的开发人员之一.Varn ...

  3. With PHP frameworks, why is the “route” concept used?

    http://programmers.stackexchange.com/questions/122190/with-php-frameworks-why-is-the-route-concept-u ...

  4. openstack controller ha测试环境搭建记录（五）——配置rabbitmq集群

    配置rabbitmq集群的步骤非常简单,因为其本身含集群功能,参考openstack官网文档:http://docs.openstack.org/ha-guide/controller-ha-rabb ...

  5. Mycat 安装配置

    下载https://github.com/MyCATApache/Mycat-download Mycat 需要jdk 环境,首先安装 jdk 安装完 jdk 环境以后 下载 mycat server ...

  6. PHP header使用

    header()函数的作用是:发送一个原始 HTTP 标头[Http Header]到客户端.标头 (header) 是服务器以 HTTP 协义传 HTML 资料到浏览器前所送出的字串,在标头与 HT ...

  7. shell之crontab

    一  crontab高级用法 Crontab 主要是在做排程, 通常一般寫法大概都是如下: 0 0 * * * /usr/local/www/awstats/cgi-bin/awstats.sh 這種 ...

  8. 一、什么是hadoop？

    一.什么是hadoop 1. 背景 Hadoop为分布式文件系统和计算的基础框架系统,其中包含hadoop程序,hdfs系统等.   2. 名词解释 1.Hadoop, Apache开源的分布式框架. ...

  9. 【亲测】Python:解决方案：Python Version 2.7 required, which was not found in the registry

    好久不更新随笔了,今天因为数据可视化作业,想抓取一些人人网好友关系数据,于是开始尝试python,用到numpy模块,安装的时候提示: 'Python Version 2.7 required, wh ...

  10. MySQL的MyISAM和InnoDB

    1．概述 MySQL数据库其中一个特性是它的存储引擎是插件式的.用户可以根据应用需要选择存储引擎.Mysql默认支持多种存储引擎,以适用各种不同的应用需要. 默认情况下,创建表不指定表的存储引擎,则新 ...