canvas的魔法，X光效果

一 图片预览

HTML5给web开发带来很多好东西，可以说，它将开创新一代web开发。

其中canvas就是它带来的东西之一，canvas非常强大，可以做到很多东西，不过我觉得学习canvas几乎等于在学习一种独立的技术了。这里只是展示一个简单的canvas效果。如下图：

二 原理介绍

我在代码中通过ctx.getImageData(0,0,width,height);获取canvas里面的imagedata对象，而这个对象就是这个效果实现的关键。

我们可以通过imagedata.data来获取一个数组，这个数组的length是canvas像素数量的四倍，其中每四个项代表一个像素。在每四个项里，他们一次代表rgba，rgb就很明显了，而a就代表透明，当a为255的时候完全不透明，当a为0的时候就是透明的。而这次的效果无需用到透明，所以没对这个进行操作。

最后我通过ctx.putImageData(imageData,0,0);把处理过的Imagedata放回去。请注意看代码以及注释。

 

注：下面那个img的src值是我本机的，因为将外链的图片添加到canvas里面的话会引发Security错误，所以在demo里面我把图片转化为DataURL来使用的。

三 代码以及demo  

 

window.onload = function () {


var photo = document.getElementById( " photo " );
photo.onload = function (){ // 把图像处理函数添加为目标图片的onload时间，因为只有图片已经加载，才能用canvas对其进行操作
var cav = document.getElementById( " cav " ); // 获取canvas对象
var ctx = cav.getContext( " 2d " ); // 通过这个函数获取canvas的上下文

var width = parseInt(cav.getAttribute( " width " ));
var height = parseInt(cav.getAttribute( " height " ));
ctx.drawImage( this , 0 , 0 ); // 将图片“画到”canvas上去

var imageData = ctx.getImageData( 0 , 0 ,width,height); // 取得canvas的imageData，我们就是通过这个对canvas进行像素操作的
var data = imageData.data;

for ( var i = 0 ,length = data.length;i < length;i = i + 4 ) // data里面每4个数据项代表一个像素
{
data[i] = 255 - data[i]; // 红
data[i + 1 ] = 255 - data[i + 1 ]; // 绿
data[i + 2 ] = 255 - data[i + 2 ]; // 蓝
}

ctx.putImageData(imageData, 0 , 0 ); // 把imageData再放回canvas

}
photo.src = " canvas-women.jpg " ;


}

 

 

 

 

 

Pola的实验室

• 此页面展示了canvas的像素控制入门效果
• 此效果只在支持canvas标签的浏览器上显示
• 注：没用excanvas.js来支持IE下的canvas是因为这个文件太大，如果要的话只要把excanvas.js添加进去就行，不过和原生的canvas有一点点差异

转载于:https://www.cnblogs.com/Pola/archive/2010/12/10/1902651.html