用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果

原创 2011年09月21日 18:45:07
第八篇,图片处理+粒子效果


用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果
预览各种效果看下图

html5效果


效果和代码看这里,看不到效果的请下载支持html5的浏览器

http://fsanguo.comoj.com/html5/jstoas07/index.html


2013年3月13日追加

该系列文章写的很早,目前该系列文章中所总结的方法等都已经封装进了lufylegend.js引擎里

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

下面有朋友问我原理,这个粒子效果其实就是将一张大的图片从上而下,一行一行进行分解,然后将分解后的碎图片,沿着随机的方向一边散开,一边降低透明度,当透明度降低为0的时候,将它移除。

上面的代码我加上了简单的注释,应该不难理解了。

获取iframe中window对象的方法

很简单的一行代码 document.getElementsByTagName('iframe')[0].contentWindow 上面这行代码获取到的就是iframe中的window对象...

html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化&地图跳转

首先,本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇,来实现游戏的脚本化,和利用游戏脚本实现地图场景的切换,离上次更新貌似很长时间了,你在看下面的文字之前,需要先了解前三篇在下啰嗦了些什么东...

用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动

第三篇,鼠标事件与游戏人物移动 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.csdn.net/lufy_legend/article...

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件终篇,LegendForHtml5Programming1.0开源库件此贴为...

HTML5高级编程之像素处理及粒子效果

HTML5中的像素处理,需要用到getImageData和putImageData两个函数,先用getImageData复制canvas画布中的像素数据,然后对获取的像素数据进行处理,最后再通过put...

基于HTML5 Canvase的在线画图及图片处理工具

简介       这是基于HTML5的Canvas而实现的在线画图及简单图片处理的工具,是我的计算机图形学期末课程设计作业。主要功能包括:画图、颜色反转、转灰度图、阴影效果、横向渐变、纵向渐变等。处...

HTML5图片处理(请使用谷歌浏览器)

什么是 HTML5?HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。HTML5 仍处于完...

[HTML5-SVG]JavaScript 的新领域 - 动态图片处理(SVG)

背景 当 JavaScript 被 Netscape 公司发明出来时,它被用来做一些琐细的事情,比如校验表单、计算日期、提示用户;随着 Web 的迅速发展,这种轻巧而灵活的语言被委以越来越多的任务,...

HTML5 高级编程之像素处理及粒子效果

HTML5中的像素处理,需要用到getImageData和putImageData两个函数,先用getImageData复制canvas画布中的像素数据,然后对获取的像素数据进行处理,最后再通过put...
  • dimply
  • dimply
  • 2014年06月04日 17:33
  • 260
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果
举报原因:
原因补充:

(最多只允许输入30个字)