第八篇，图片处理+粒子效果
用仿actionscript的语法来编写html5系列开发到现在，应该可以做出一些东西了，下面先来研究下图片的各种效果
预览各种效果看下图
效果和代码看这里,看不到效果的请下载支持html5的浏览器
http://fsanguo.comoj.com/html5/jstoas07/index.html
lufylegend.js引擎的下载链接
http://lufylegend.com/lufylegend
因为引擎封装后，对于之前的代码做了一部分调整，删去了一些属性，下面是我用新版引擎开发的同样的粒子效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>粒子效果</title>
</head>
<body>
<div id="mylegend">loading......</div>
<script type="text/javascript" src="http://lufylegend.com/js/lufylegend-1.6.1.min.js"></script>
<script type="text/javascript">
init(40,"mylegend",300,300,main);
var imgdata = [{name:"img",path:"http://lufylegend.com/images/face.jpg"}];
var imglist;
var mainbitmap,mainbitmapheight;
var windlist = [];
var backlayer;
function main(){
lloadmanage.load(
imgdata,
function(progress){},
loadover
);
}
function loadover(result){
imglist = result;
//加入一个lsprite对象
backlayer = new lsprite();
addchild(backlayer);
//加入一个lbitmap对象来显示一张大图片，将图片加载到backlayer对象上
mainbitmap = new lbitmap(new lbitmapdata(imglist["img"]));
backlayer.addchild(mainbitmap);
//将lbitmap对象初始的高度保存起来
mainbitmapheight = mainbitmap.getheight();
//给lsprite对象加载一个贞事件，即时间轴
backlayer.addeventlistener(levent.enter_frame,onframe);
}
function onframe(){
var bitmapdata;
var bitmap;
var addy,addx;
if(mainbitmap){
//通过lbitmapdata对象的setproperties函数，来修改lbitmapdata对象显示图片的范围，每运行一次，显示范围在y轴方向上的起始位置向下移动addy个单位
addy = 3;
mainbitmap.y += addy;
if(mainbitmap.y >= mainbitmapheight){
addy += mainbitmapheight - mainbitmap.y;
mainbitmap.y = mainbitmapheight;
//当lbitmapdata对象显示图片的范围变为0之后，将其从backlayer上移除
backlayer.removechild(mainbitmap);
}else{
mainbitmap.bitmapdata.setproperties(0,mainbitmap.y,mainbitmap.getwidth(),(mainbitmapheight - mainbitmap.y));
}
//下面是将图片一行一行的分解，每运行一次分解一行
var arr = [];
for(i=0;i<mainbitmap.getwidth();i += 3){
addx = 3;
if(i+addx > mainbitmap.getwidth()){
addx = mainbitmap.getwidth() - i;
}
//通过设定lbitmapdata对象的显示范围，来得到分解后的小图片，并且将分解后的小图片压入到arr数组
bitmapdata = new lbitmapdata(imglist["img"],i,mainbitmap.y-addy,addx,addy);
bitmap = new lbitmap(bitmapdata);
bitmap.x = i;
bitmap.y = mainbitmap.y-addy;
backlayer.addchild(bitmap);
arr.push(bitmap);
}
if(mainbitmap.y >= mainbitmapheight)mainbitmap=null;
//将分解后的一行小图片压入windlist数组
windlist.push(arr);
}
windrun();
}
function windrun(){
var i,j,flag,ml=1;
//循环windlist数组中的每一张小图片，随机向左上右等方向进行移动
for(i=0;i<windlist.length;i++){
if(windlist[i].length == 0){
windlist.splice(i,1);
i--;
continue;
}
for(j=0;j<windlist[i].length;j++){
if(windlist[i][j].i == null)windlist[i][j].i=1;
flag = math.random();
if(flag < 0.3){
windlist[i][j].x += ml*windlist[i][j].i;
}else if(flag < 0.6){
windlist[i][j].x -= ml*windlist[i][j].i;
}else{
windlist[i][j].y -= ml*windlist[i][j].i;
}
windlist[i][j].alpha -= 0.05;
windlist[i][j].i += 2;
if(windlist[i][j].alpha <= 0 || windlist[i][j].x > lglobal.width || windlist[i][j].y > lglobal.height){
backlayer.removechild(windlist[i][j]);
windlist[i].splice(j,1);
j--;
}
}
}
}
</script>
</body>
</html>
测试连接
http://lufylegend.com/demo/astojs/8.html
以上就是用仿actionscript的语法来编写html5——第八篇，图片处理+粒子效果的内容。