HTML5之Canvas 2D入门4 - 直接操作像素

转载 2016年08月31日 14:52:10

前面的例子都是使用图片或者图形来绘图,这是相对高级的API,而且所有的操作和变换都是针对“网格坐标系”的。除此之外,canvas还支持直接操作每个像素(全部的,或者部分的);毋庸置疑,这些操作是针对“像素坐标系”中的像素的,这些操作完全不受变换矩阵、阴影效果、全局透明度设置、裁剪路径、组合效果的影响,因为这些所有的效果都是针对“网格坐标系”的。操作完以后再放回canvas中,可以实现一些有趣的效果。
下面是常见的方法:
imagedata = context.createImageData(sw, sh)
返回指定维度的ImageData对象。
imagedata = context.createImageData(imagedata)
返回与指定对象相同维度的ImageData对象。
imagedata = context.getImageData(sx, sy, sw, sh)
返回指定起点与维度的ImageData对象。
imagedata.width
imagedata.height
返回ImageData的维度值(每行/列的像素数目)。
imagedata.data
按照每个像素的RGBA的顺序返回一维的像素数组(按照从左向右,从上到下的顺序,从左上角的像素开始,依次把每个像素的RGBA分量放到这个数组中,所以数组的长度是像素数目的4倍),这个数组的元素全是整数,范围是0~255。
context.putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])
把像素写回到指定的canvas区域,如果指定了dirty矩形的范围,则只有这个范围的像素会被写回。所有针对“网格坐标系”的样式操作都会被覆盖掉。

看一个简单的例子:

var data = c.createImageData(300,200);
for(var x=0; x<data.width; x++) {
    for(var y=0; y<data.height; y++) {

        var val = 0;
        var horz = (Math.floor(x/4) % 2 == 0); //loop every 4 pixels
        var vert = (Math.floor(y/4) % 2 == 0); // loop every 4 pixels
        if( (horz && !vert) || (!horz && vert)) {
            val = 255;
        } else {
            val = 0;
        }

        var index = (y*data.width+x)*4;  //calculate index
        data.data[index] = val;   // red
        data.data[index+1] = val; // green
        data.data[index+2] = val; // blue
        data.data[index+3] = 255; // force alpha to 100%
    }
}
//set the data back
c.putImageData(data,0,0);

这个相当简单,就是把每个像素的颜色分量设置相应的值。

  此外,操作像素也可以直接修改图像的效果,这个道理也很简单,就是获取canvas中图像区域的像素,编辑完放回去就可以了。
看反转图像的一个例子(FireFox中可以看到效果,目前Chrome看不到效果):

function testPixel()
{
 var canvas = document.getElementById('lesson01');
 var c = canvas.getContext('2d');  

 var img = new Image();

img.onload = function() {
    //draw the image to the canvas
    c.drawImage(img,0,0);
    //get the canvas data
    var data = c.getImageData(0,0,canvas.width,canvas.height);
    //invert each pixel
    for(n=0; n<data.width*data.height; n++) {
        var index = n*4; 
        data.data[index]   = 255-data.data[index];
        data.data[index+1] = 255-data.data[index];
        data.data[index+2] = 255-data.data[index];
        //don't touch the alpha
    }

    //set the data back
    c.putImageData(data,0,0);
}
 img.src = "Penguins.png";
}

转自:http://www.cnblogs.com/dxy1982/archive/2012/03/12/2376753.html

相关文章推荐

idea自动上传工程部署文件,远程部署

前言 idea无疑是一款强大的开发工具,今天说一下如何配置自动上传工程部署文件 步骤说明: 1:配置ssh(ftp)远程服务器信息 打开sesttings面板 上图显示的这个默认会勾...

canvas像素级操作实现滤镜之浮雕滤镜

原理: 1.用当前点的RGB值减去相邻点的RGB值并加上128作为新的RGB值(简单的处理) 2.当前点的值乘以2,加上128减去相邻点的值,然后减去下一行对应点的值;   这里涉及到图像边...

HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析

到目前为止,SVG与Canvas的主要特性均已经总结完毕了,现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景,感兴趣的朋友可以了解下哦,或许对你有所帮助。 到目前为止,SVG与...

HTML5之Canvas 2D入门3 - 变换与组合

知识准备 - 坐标系  在真正开始总结变换之前,我们需要先了解一下canvas的相关坐标系知识。“像素坐标系”:在HTML中,我们会设置canvas的属性:width和height,它们是以像素为单位...

HTML5之Canvas 2D入门5 - 事件与动画

Canvas & SVG & DOM   Canvas与SVG都是2D绘图的利器,除此之外,使用CSS、DOM也可以实现某些性状的绘制,而且在动画中,也都可以使用这些技术实现动画效果。这里就简单比较一...

HTML5之SVG 2D入门4—笔画与填充

颜色处理,也就是填充和边框效果;你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中,也可以以CSS的形式保存,这是与canvas不一样的地方。 前面我们重点...

HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式

CSS3中的很多都可以类比与我们canvas的一些属性  canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性  我们不仅仅可以绘制图形,还可以向画布中添加文字 文字填充 ...

HTML5特性 > Canvas >像素和颜色

一、理解颜色 我们在电脑屏幕上可以看到色彩斑斓的图像,其实这些图像都是由一个个像素点组成的。那么像素是什么?颜色又是什么呢?(如果您提出这两个问题,您一定是个热爱思考的人)一个像素其实对应着内存...

HTML5画布Canvas图片抽取、像素信息获取、命中检测

今天主要介绍canvas中比较强大的功能 比如将画布内容抽取为图片 获取、修改画布的像素信息 以及画布的命中检测 首先我仍然需要创建画布图片抽取首先要明确的一点是 toDataURL()是c...

解决html5<canvas>标签像素变大,图片变模糊的情况

html5的标签功能非常强大,但今天发现在编辑画线的时候,实际显示的像素要比设置的大很多。经过尝试终于找到了原因。 以下是一个小例子 var can = document.getEle...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5之Canvas 2D入门4 - 直接操作像素
举报原因:
原因补充:

(最多只允许输入30个字)