canvas的魔法,X光效果

一 图片预览

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

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

canvas的魔法,X光效果

二 原理介绍

我在代码中通过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 " ;


}

 

 

 

 

 

你可能感兴趣的:(canvas)