ホームページ >ウェブフロントエンド >H5 チュートリアル >ActionScript のような構文を使用して html5 を作成する - パート 8、画像処理 + パーティクル エフェクト
ActionScript のような構文を使用して html5 を作成する - パート 8、画像処理 + パーティクル エフェクト
- 黄舟オリジナル
- 2017-01-17 16:58:181396ブラウズ
パート 8、画像処理 + パーティクル エフェクト
ActionScript のような構文を使用して HTML5 シリーズを作成できるようになりました。まず、画像のさまざまなエフェクトを学習してみましょう。下の画像
<!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 を記述することです - パート 8、画像処理 + パーティクル エフェクト、その他の関連コンテンツ PHP 中国語 Web サイト (www.php.cn) にご注意ください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。