HTML5边玩边学(3)像素和颜色


Posted in HTML / CSS onSeptember 21, 2010

一、理解颜色

我们在电脑屏幕上可以看到色彩斑斓的图像,其实这些图像都是由一个个像素点组成的。那么像素是什么?颜色又是什么呢?(如果您提出这两个问题,您一定是个热爱思考的人)一个像素其实对应着内存中的一组连续的二进制位,由于是二进制位,每个位上的取值当然只能是 0 或者 1 了!这样,这组连续的二进制位就可以由 0 ,1 排列组合出很多种情况,而每一种排列组合就决定了这个像素的一种颜色。先看看下面这幅图

声明:为本文为原创文章,作者保留所有权利!欢迎转载,转载请注明作者左??/strong>和出处博客园

HTML5边玩边学(3)像素和颜色

 

我们可以看到这幅图描述了六个像素点,一共由24个小方框组成。

注意:图中的一个小方框代表一个字节,即8个二进制位。

因此,每个像素点由四个字节组成。图中也分别标出了这四个字节代表的含义:

第一个字节决定像素的红色值

第二个字节决定像素的绿色值

第三个字节决定像素的蓝色值

第四个字节决定像素的透明度值

每一种分颜色值的大小是从 0 到 255(提问:为什么只能到255?) ,透明度的取值:0 代表完全透明,255代表完全不透明

这样,我们就可以用(255,0,0,255)来表示一个纯红色像素

在内存中,他是这样的一个32位的串: 11111111 00000000 00000000 11111111

 

二、操作像素

了解了颜色和像素的实质,我们就可以对图形进行更加复杂的处理。

可是,HTML5 目前还没有提供类似 setPixel 或者 getPixel 这样直接操作像素点的方法, 但是我们也有办法

就是使用 ImageData 对象:

ImageData对象用来保存图像像素值,它有 width、height和 data 三个属性,其中 data 属性就是一个连续数组,图像的所有像素值其实是保存在 data 里面的。

data 属性保存像素值的方法和我们在前面图片中看到的一模一样:

imageData.data[index*4 +0]

imageData.data[index*4 +1]

imageData.data[index*4 +2]

imageData.data[index*4 +3]

上面取出了 data 数组中连续相邻的四个值,这四个值分别代表了图像中第 index+1 个像素的红色、绿色、蓝色和透明度值的大小。

注意index 从0 开始,图像中总共有 width * height 个像素,数组中总共保存了 width * height * 4 个数值

 

上下文对象 Context 有三个方法用来创建、读取和设置 ImageData 对象,他们分别是

createImageData(width, height):在内存中创建一个指定大小的 ImageData 对象(即像素数组),对象中的像素点都是黑色透明的,即rgba(0,0,0,0)

getImageData(x, y, width, height):返回一个 ImageData 对象,这个 IamgeData 对象中包含了指定区域的像素数组

putImageData(data, x, y):将 ImageData 对象绘制到屏幕的指定区域上

 

三、一个简单的图像处理例子

上面说了这么多,我们用了解的知识来玩玩图像编程,或许有一天我们就要在 Chrome 中玩 PhotoShop 了。

程序大概是这个样子的:

1、将一幅图片绘制到一个 canvas 元素上,为了不引发安全错误(Security_ERR:DOM EXCEPTION 18),我用的是我博客顶部的横幅背景图片。你要运行这个例子,可能需要改成自己的图片

2、有四个滑动条,分别代表 GRBA 四个分量

3、拖动滑动条,图像中对应的颜色分量就会增加或者减少

4、如果图像变成透明,就会显示 canvas 元素的背景,我把这个背景设置成了我的头像,呵呵。

思路:其实就是用 getImageData 方法,将你想改变的那一块区域的像素数组取出来,然后根据你拖动的滑动条和滑动条的数值,来更改那一块区域里所有像素对应颜色分量的值。处理完毕后再用 putImageData 方法绘制到画布上,就是这么简单。

下面是代码:

简单的图像处理

复制代码
代码如下:

<canvas id="test1" width="507" height="348" style="background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
红色:<input type="range" min="1" max="100" onchange="colorChange(event,0)"/>
绿色:<input type="range" min="1" max="100" onchange="colorChange(event,1)"/>
蓝色:<input type="range" min="1" max="100" onchange="colorChange(event,2)"/>
透明:<input type="range" min="1" max="100" onchange="colorChange(event,3)"/>
<script type="text/javascript">
//获取上下文对象
var canvas = document.getElementById("test1");
var ctx = canvas.getContext("2d");
//画布的宽度和长度
var width = parseInt(canvas.getAttribute("width"));
var height = parseInt(canvas.getAttribute("height"));
//装入图像
var image = new Image();
image.onload =imageLoaded;
//顶部背景图片
image.src = "/skins/Valentine/images/banner2.gif";
//用来保存像素数组的变量
var imageData=null;
function imageLoaded() {
// 将图片画到画布上
ctx.drawImage(image, 0, 0);
//取图像的像素数组
imageData = ctx.getImageData(0, 0, width, height);
}
function colorChange(event,offset){
imageLoaded();
for (var y = 0; y < imageData.height; y++) {
for (x = 0;x < imageData.width; x++) {
//index 为当前要处理的像素编号
var index = y * imageData.width + x;
//一个像素占四个字节,即 p 为当前指针的位置
var p = index * 4;
//改变当前像素 offset 颜色分量的数值,offset 取值为0-3
var color = imageData.data[p + offset] * event.target.value / 50;
// 颜色值限定在[0..255]
color = Math.min(255, color);
//将改变后的颜色值存回数组
imageData.data[p + offset]=color
}
}
//输出到屏幕
ctx.putImageData(imageData, 0, 0);
}
</script>

演示效果:

提示:您可以先修改部分代码再运行
 

四、绘制随机颜色的点

这个例子是在画布上随机选择一个点,然后再给他一个随机的颜色值,其实用到的方法和上面的例子大同小异,就是需求不同罢了。

下面是代码和程序实例:
随机颜色的点

复制代码
代码如下:

<canvas id="test2" width="300" height="300" style=" background-color: black">你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
<input type="button" value="画随机点" onclick="interval=setInterval(randomPixel,1);" />
<input type="button" value="停止" onclick="clearInterval(interval);"/>
<input type="button" value="清除" onclick="clearCanvas();"/>
<script type="text/javascript">
//获取上下文对象
var canvas = document.getElementById("test2");
var ctx = canvas.getContext("2d");
//画布的宽度和长度
var width = parseInt(canvas.getAttribute("width"));
var height = parseInt(canvas.getAttribute("height"));
var imageData = ctx.createImageData(width, height);
function randomPixel(){
var x= parseInt(Math.random()*width);
var y= parseInt(Math.random()*height);
var index = y * width + x;
var p = index * 4;
imageData.data[p + 0] = parseInt(Math.random() * 256);
imageData.data[p + 1] = parseInt(Math.random() * 256);
imageData.data[p + 2] = parseInt(Math.random() * 256);
imageData.data[p + 3] =parseInt(Math.random() * 256);
ctx.putImageData(imageData,0,0);
}
function clearCanvas(){
ctx.clearRect(0,0,width,height);
imageData = ctx.createImageData(width, height);
}
</script>

演示效果:

提示:您可以先修改部分代码再运行
HTML / CSS 相关文章推荐
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 #HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 #HTML / CSS
html5 学习简单的拾色器
Sep 03 #HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 #HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 #HTML / CSS
用HTML5.0制作网页的教程
May 30 #HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 #HTML / CSS
You might like
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现划词翻译
2020/04/23 Python
Python深入学习之内存管理
2014/08/31 Python
python实现定时播放mp3
2015/03/29 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
初中三年学生的学习自我评价
2013/11/13 职场文书
八年级历史教学反思
2014/01/10 职场文书
小学校长汇报材料
2014/08/20 职场文书
药店促销活动策划方案
2014/08/24 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript