집 >웹 프론트엔드 >H5 튜토리얼 >ActionScript와 유사한 구문을 사용하여 html5 작성 - 8부, 이미지 처리 + 입자 효과

ActionScript와 유사한 구문을 사용하여 html5 작성 - 8부, 이미지 처리 + 입자 효과

黄舟원래의: 2017-01-17 16:58:181427검색

8부, 이미지 처리 + 입자 효과

ActionScript와 유사한 구문을 사용하여 HTML5 시리즈 작성 이제 먼저 무언가를 만들 수 있습니다. image 효과
다양한 효과를 미리 보려면 아래 그림을 참조하세요

여기에서 효과와 코드가 보이지 않으면 브라우저를 다운로드하세요. 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를 작성하는 것입니다 - 8부, 이미지 처리 + 입자 효과, 더 많은 관련 콘텐츠를 주목해 주세요 PHP 중국어 웹사이트(www.php.cn)!

성명：

이전 기사：ActionScript와 유사한 구문을 사용하여 html5 작성 - 7부, 사용자 정의 버튼다음 기사：ActionScript와 유사한 구문을 사용하여 html5 작성 - 7부, 사용자 정의 버튼

ActionScript와 유사한 구문을 사용하여 html5 작성 - 8부, 이미지 처리 + 입자 효과

관련 기사