您的位置:主页 > HTML/JS > 活在像素的世界中

活在像素的世界中

接上一文,蛋疼的马里奥,用css拼完了马里奥FC图片之后,我萌发了写一篇关于像素的想法。

何谓像素?“像素”(Pixel) 是由 Picture(图像) 和 Element(元素)这两个单词的字母所组成的,是用来计算数码影像的一种单位,和我们日常单位"厘米"类似,可以作为一种长度丈量的单位。而给我最直观的印象在于PS中放大8倍后,直观的1px × 1px小方块。

像素的构成就是色彩中的三原色RGB(红色,绿色,蓝色),这其实等同于彩色电子屏幕显色以及彩色印刷的原理。偶然的一次机会我好奇的翻开老实彩色打印机,黑色墨水不够,纸张通过多种颜色的覆盖,最后变成的黑色,当你用酒精清洗CRT显示器时,透过水的放大作用,你会打开整个屏幕都是花花绿绿的小点构成。

对于一个页面仔来说,每天与之打交道的最多就是像素了,在PS中比比量量,切切裁裁,每一处都要精确的像素单位。一张精美的设计稿,在放大X倍以后,无非全都是花花绿绿像素点揉挤在一起的,再有欲望也全打消了。为什么会这样,对于人眼来说,对微小事物分辨率有限,眼中图像会自动的混合相邻的颜色,所以其实图像的本质色彩远远大于我们所能看到的部分。

下面这张画,其实并不是图片,其实是通过64×64个节点所构成的,从像素的角度上观察,其实这就是一张点阵式图像,一张位图的本质就在于此,但是平常我们并不会这么使用,因为一般的图片颜色丰富,色彩数据大,下面这张64px × 64px 图像如果用css来做就有264KB。

为了好玩,我做了这么一个小玩具,通过图片转换为网页的像素显示,为了取imageData,只好采用canvas来做,所以只有再现代浏览器(webkit内核,mozilla内核,opera内核)中能够使用,因为canvas的因素,只能选用当前目录下面的图片元素。为了节约流量,就不再做图片上传了,如果你们要使用就自己下载代码。

IE的用户就别点了,爷们儿要黑你的屏。

猛击使用 :在线演示转换地址

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

另外,最近垃圾评论一下猛增,让我有点受宠弱惊,之后的一律提交baidu,google垃圾网站库。

作者:ariesjia

前端少先队员,光荣的红领巾在胸前飘扬

继续八卦

已经4条留言

  1. Malcolm On 2010年05月10日8:20 下午

    高手就是高手,希望你做出更多好玩的东西

    • Ariesjia On 2010年05月11日9:04 上午

      @Malcolm
      那里什么高手啊,还差的远呢,还有很长很长的路要走,我会努力的。

  2. lq On 2010年05月10日9:56 下午

    什么垃圾评论啊?

    • Ariesjia On 2010年05月11日9:05 上午

      @lq
      就是有很多商业网站的来打广告,全都已经被我删了

留言万岁!吹水有益健康!