粒子动画creatjs

https://segmentfault.com/a/1190000005704935?utm_source=tuicool&utm_medium=referral
http://blog.csdn.net/yeana1/article/details/52460490#reply
html页面

<canvas id="text" width="500" height="100"></canvas>
<canvas id="stage" width="500" height="100"></canvas>
<form id="form">
    <input type="text" id="inputText" value="HELLO"/>
    <input type="submit" value="TRY IT"/>
</form>

<!--<script src='js/EasePack.min.js'></script>-->
<script src='js/TweenLite.min.js'></script>
<!--TweenJS – 用来帮助调整HTML5和Javascript属性-->
<!--EaselJS – 简化处理HTML5画布（核心）-->
<script src='js/easeljs-0.7.1.min.js'></script>
<!--<script src='js/requestAnimationFrame.js'></script>-->

<script src="js/index.js"></script>

index.js
初始化：

 var stage, textStage, form, input;
    var circles, textPixels, textFormed;
    var offsetX, offsetY, text;
    var colors = ['#B2949D', '#FFF578', '#FF5F8D', '#37A9CC', '#188EB2'];

    function init() {
        initStages();
        initForm();
        initText();
        initCircles();
        animate();
        addListeners();
    }

开始画图(canvas)：

 function initStages() {
        offsetX = (window.innerWidth-600)/2;//图画定位X
        offsetY = (window.innerHeight-300)/2;//图画定位
        textStage = new createjs.Stage("text");
        textStage.canvas.width = 600;
        textStage.canvas.height = 200;

        stage = new createjs.Stage("stage");
        stage.canvas.width = window.innerWidth;
        stage.canvas.height = window.innerHeight;
    }

设置表单

  function initForm() {
        form = document.getElementById('form');
        form.style.top = offsetY+200+'px';
        form.style.left = offsetX+'px';
        input = document.getElementById('inputText');
    }

    function initText() {
        text = new createjs.Text("t", "80px 'Source Sans Pro'", "#eee");
        text.textAlign = 'center';
        text.x = 300;
    }

//画随机漂浮的小圆点

 function initCircles() {
        circles = [];
        for(var i=0; i<600; i++) {
            var circle = new createjs.Shape();
            var r = 7;//半径
            var x = window.innerWidth*Math.random();//x定位
            var y = window.innerHeight*Math.random();//y定位
            var color = colors[Math.floor(i%colors.length)];//颜色
            var alpha = 0.2 + Math.random()*0.5;//透明度
            circle.alpha = alpha;
            circle.radius = r;
            circle.graphics.beginFill(color).drawCircle(0, 0, r);//用画笔设置颜色，调用方法画矩形，矩形参数：drawRect(0, 0, 100, 100)
            circle.x = x;
            circle.y = y;
            circles.push(circle);
            stage.addChild(circle);
            circle.movement = 'float';
            tweenCircle(circle);
        }
    }