html5中的像素处理，需要用到getimagedata和putimagedata两个函数，先用getimagedata复制canvas画布中的像素数据，然后对获取的像素数据进行处理，最后再通过putimagedata将处理完的数据粘贴到canvas画布。我们不妨把中间处理像素的过程称作像素的批处理，由于像素的复制和粘贴是两个比较费时的过程，为了更高效的对像素进行处理，我们应该在一次批处理过程中尽可能处理更多的像素数据，来减少像素的复制和粘贴这两个操作。
这听起来似乎是一个相当麻烦的过程，可能有些朋友光是看到上面的几句话估计就已经开始不耐烦了，其实我也是这么认为的，所以我把这一麻烦的过程封装到了lufylegend引擎中的lbitmapdata类中，你可以像处理flash的像素一样处理html5中的canvas，这听起来是不是很有趣？如果你有兴趣，那么请跟着我一起来看一下这个好玩儿的小功能。
首先，来认识一下lbitmapdata，它通常是用来保存image对象的，具体用法我就不多说了，大家可以看一下api文档。这里我主要介绍一下如何用它来批量处理像素。
下面是lbitmapdata中的两个函数
函数功能
getpixel(x,y,colortype) 返回一个表示 bitmapdata 对象中在某个特定点 (x, y) 处的 rgb 像素值的数组。其中colortype为需要获取的像素数据的格式，默认为像素数组，当设置成字符串number的时候，返回number型的像素
setpixel(x,y,data) 设置 lbitmapdata 对象的单个像素。其中data为像素值(支持像素数组，#ff0000,0xff000等三种格式)
上面这两个函数是获取和设置单个像素，当我们需要一次性获取或设置一个区域的像素的时候，对应的两个函数如下
函数功能
getpixels(rect) 返回一组表示 bitmapdata 对象中在某个特定区域的 rgb 像素值的数组。其中rect为lrectangle对象，是一个矩形。
setpixels(rect, data) 将像素数据数组转换粘贴到指定的矩形区域。其中data为像素值(支持像素数组，#ff0000,0xff000等三种格式)
我们先来准备一张图片，比如下面鄙人这张帅帅的头像。
bitmapdata = new lbitmapdata(imglist[face]);  bitmapdata.lock();  var img = bitmapdata.getpixels(new lrectangle(75,50,100,100));          有时候我们需要对lbitmapdata进行多次像素的复制和粘贴操作，这个时候可以使用lock函数，它可以将像素数组缓存起来，在这个过程中，所做的所有的像素操作都是对这个缓存数组进行操作，当操作完毕后，调用相应的unlock函数，将操作完的像素数据粘贴回lbitmapdata中。
比如下面这样，我们将复制完的数组中的一部分，分四次粘贴到另外一个lbitmapdata的四个不同的位置上。
bitmapdata2 = new lbitmapdata(null,0,0,500,400,lbitmapdata.data_canvas);  bitmapdata2.lock();  bitmapdata2.setpixels(new lrectangle(50,30,50,50),img);  bitmapdata2.setpixels(new lrectangle(100,30,50,50),img);  bitmapdata2.setpixels(new lrectangle(150,30,50,50),img);  bitmapdata2.setpixels(new lrectangle(200,30,50,50),img);  bitmapdata2.unlock();
上面的代码，首先创建了一个空的lbitrmapdata对象，最后一个参数是lufylegend-1.8.8版中的新功能，将lbitrmapdata对象中保存的数据转换为canvas对象，这样可以提高像素操作的效率。
        执行代码效果如下
当然，你也可以对这些像素做一些处理，比如下面这样
bitmapdata2.lock();  var rect = new lrectangle(50,100,100,100);  var rect1 = new lrectangle(150,100,100,100);  for(var y=0;y;y++){      for(var x=0;x;x++){          var i = y*4*100+x*4;          bitmapdata2.setpixel(rect.x+rect.width-x,y+rect.y,[img.data[i],img.data[i+1],img.data[i+2],img.data[i+3]]);      }  }  for(var y=0;y;y++){      for(var x=0;x;x++){          var i = y*4*100+x*4;          bitmapdata2.setpixel(x+rect1.x,y+rect1.y,[img.data[i],img.data[i+1],img.data[i+2],img.data[i+3]]);      }  }  bitmapdata2.unlock();
效果如下
可以看到，我们成功的通过处理像素，将图片翻转了过来。
       当然图片翻转不需要这么麻烦，在lufylegend.js引擎中，你只需要将对象的属性scalex设置为-1就可以实现图片的翻转。这里我们主要是为了说明像素的处理很灵活而已。
       好了，有了上面的介绍，我们可以用这些api来制作一个酷酷的粒子效果，效果如下。
首先，我们先在画布上加一个文本
var labeltext = new ltextfield();  labeltext.color = #000000;  labeltext.weight = bolder;  labeltext.text = getparameter(k);  if(!labeltext.text)labeltext.text=lufylegend.js;  labeltext.size = 50;  var w = labeltext.getwidth()*1.1;  var h = labeltext.size*1.5;  labeltext.width = w;  labeltext.setwordwrap(true,h);  labeltext.x = (lglobal.width - w)*0.5;  labeltext.y = (lglobal.height - h)*0.5;    backlayer = new lsprite();  addchild(backlayer);  backlayer.addchild(labeltext);
效果如下
上面唯一需要解释的是下面几行
var w = labeltext.getwidth()*1.1;  var h = labeltext.size*1.5;  labeltext.width = w;  labeltext.setwordwrap(true,h);  
       其实只需要用getwidth()和getheight()就能获取文本的高和宽，但是因为canvas中没有获取文本高度的函数，所以引擎中用了一个不太准确的方式来获取（当然，这一点在引擎下次更新中会得到完美的解决），本次开发，所使用的文本高度和宽度都必须不小于文本的原始大小，所以，我给文本重新设定了一下略大的高度和宽度。      接下来，我们利用lbitmapdata对象的draw函数，把这个文本转换为lbitmapdata对象，为什么要转换成lbitmapdata对象？请接着往下看，一会儿就知道了。
bitmapdata = new lbitmapdata(#000000,0,0,lglobal.width,lglobal.height,lbitmapdata.data_canvas);  bitmapdata.draw(backlayer);
上面的处理其实都是铺垫，不是用来真正显示的，下面再来创建一个lbitmapdata空对象，并通过lbitmap将其绘制到canvas画布上。
snowback = new lbitmapdata(null,0,0,lglobal.width,lglobal.height,lbitmapdata.data_canvas);  var bitmap = new lbitmap(snowback);  backlayer.addchild(bitmap);
重点来了，我现在需要对snowback对象的像素不断的进行处理，这个简单，我们通过enter_frame来实现
backlayer.addeventlistener(levent.enter_frame,run);
上面的效果图，可以看到，我需要往画布上不断的添加白色的粒子，就和下雪一样。但是这些白色粒子，不能直接画到画布上，我们需要先将这些粒子添加到一个缓存数组中，然后来批量的操作它们，下面的函数用来生成一个粒子，参数分别是（x坐标，y坐标，下降加速度，x轴方向速度，y轴方向速度）。
function particle(px,py,ps,pvx,pvy){      if(typeof ps == undefined)ps = 1;      if(typeof pvx == undefined)pvx = 0;      if(typeof pvy == undefined)pvy = 0;      _snow.push({x:px,y:py,s:ps,vx:pvx,vy:pvy});  }
我们通过不断的调用这个函数，来向画布中不断的添加白色粒子，添加到画布上的粒子，会做向下类似于自由落体的加速运动，在运动过程中会遇到阻碍，就是前面在画面上显示过的文字，当粒子碰到文字的时候，受到阻力，运动变得缓慢，这样粒子在有文字的地方不断的受到文字的阻碍，大量的白色粒子就会聚集到文字处，就形成了上面的粒子效果。
      下面的函数用来检验指定坐标处是否处在文字上
function checkpixel(x,y){      var pixel = bitmapdata.getpixel(x,y);      for(var i=0;i;i++){          if(pixel[i])return true;      }      return false;  }
原理就是获取坐标点像素，然后检验像素点的颜色，现在知道为什么要把前面的文字转换成lbitmapdata对象了吧，就是为了要获取指定点的像素值。
      12 / 2 页下一页