HTML5之Canvas 2D入门4 - 直接操作像素
来源:互联网 发布:淘宝免费引流 编辑:程序博客网 时间:2024/05/17 04:26
前面的例子都是使用图片或者图形来绘图,这是相对高级的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 backc.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
- HTML5之Canvas 2D入门4 - 直接操作像素
- HTML5之Canvas 2D入门2 - Canvas绘制图形
- HTML5之SVG 2D入门13 - svg对决canvas
- HTML5之Canvas 2D入门3 - 变换与组合
- HTML5之Canvas 2D入门5 - 事件与动画
- html5<canvas操作像素实例之渐变>
- HTML5之Canvas 2D入门1 - Canvas绘制文本和图像
- 突袭HTML5之Canvas 2D入门5 - 事件与动画
- html5<canvas操作像素之反相、窗帘、模糊特效>
- html5<canvas操作像素之添加杂色,动态倒影逐行显示>
- HTML5 - canvas 2D绘图
- Html5 canvas 2d rotate。
- HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
- HTML5之SVG 2D入门4 - 笔画与填充
- HTML5之SVG 2D入门7
- HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
- BGRABitmap图像操作4:直接操作像素
- canvas 像素操作
- 新人报到
- iOS--js和oc交互
- 新人报到
- 项目受源代码管理。向源代码管理注册此项目时出错。建议不要对此项目进行任何更改
- 新人报到
- HTML5之Canvas 2D入门4 - 直接操作像素
- 单例模式的常见应用场景
- spring引入多个properties文件
- 新人报到
- 相机芯片尺寸及选型公式
- 【Java语言学习】之递归、非递归前序、中序、后续遍历二叉树
- SVN仓库迁移(将一个仓库从一台机器上转移到另一台机器上)
- ulimit命令
- 新人报到