easeljs实现炫酷多彩粒子圈圈构成奥运五环动画效果代码

代码语言:html

所属分类:动画

代码描述:easeljs实现炫酷多彩粒子圈圈构成奥运五环动画效果代码

代码标签: easeljs 奥运 五环 圈圈

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          margin: 0;
          padding: 0;
          border: 0;
        }
        
        body {
          background: #efefef;
        }
    </style>



</head>

<body>
    <canvas id="world"></canvas>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/easeljs-0.7.1.js"></script>

    <script>
        /*-----------------------------------
            グローバル変数
        -----------------------------------*/
        var cj = createjs,
            stage,
            particles = [],
            centerX,
            centerY,
            particleNum = window.innerWidth / 6,
            color = ["blue","black","red","yellow","green"];
            speed = Math.PI / 60,
            RADIUS = window.innerWidth / 7,//輪の半径
            margin = RADIUS / 10;
            SPEED_MIN = RADIUS / 2,
            SPEED_MAX = RADIUS;
        
        
        /*-----------------------------------
            メイン
        -----------------------------------*/
        function init(){
            var rotateCenterX,
                rotateCenterY,
                circle,
                radius = RADIUS;
            //ステージ生成
            stage = new cj.Stage("world");
            stage.canvas.width = window.innerWidth;
            stage.canvas.height = window.innerHeight;
        
        
            for(var i = 1;i <= 3;i++){
                circle = new Circle(i,1,radius,color[i - 1]);
                circle.create();
                
            }
            
            circle = new Circle(1,2,radius,color[3]);  
            circle.create();
            
            circle = new Circle(2,2,radius,color[4]); .........完整代码请登录后点击上方下载按钮下载查看

网友评论0