createjs 下雪实例

demo: http://output.jsbin.com/davixatona

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>Paper</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>

  <script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>

</head>

<style type="text/css">

body {

  background-color: aliceblue;

}

#js_canvas {

  border: 1px solid red;

}

</style>

<body>

  <canvas id="js_canvas" width="900" height="506"></canvas>

</body>

</html>

<script type="text/javascript">

var js_paper = [

  'iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3MzdEODgwMzhBNEZFNDExODNGQUQ4RDkwMjVGMDFCQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMERFNDMxMUQzQkExMUU1QjZEMzlDRUMyNzExQTI0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMERFNDMxMEQzQkExMUU1QjZEMzlDRUMyNzExQTI0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ5MDEzMjcyQjFEM0U1MTFCN0FDOTU4NzYxMjlGNzY1IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTIwNmJjMDItZDE3YS0xMWU1LWI5OGMtZWZmNDQyODk5MTIxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+UfAN2wAAARlJREFUeNpi/P//PwMh8DOqTh5IFQDxZvZlTfuQ5VgIaDQAUqVAHAZVqwvEKAYwYnMBUKMbVKMLFnONgK44j+ECoCZWIBUOxMVAbIDHYUVAHAt3wY/IWl4gnQyVkGUgDP4AsTLQFY9AHCYgXgbE/URqhrk6F8YBGTCdgXSQDvSyAMyA7UB8jUQDQN5OgccC0DRQGMwh0ZAnoLBggnIWA/FzEg2QAeIIsAHAEP0FpKaRERYFTEicKUD8hQTNb0BJG24A0BUfgNR8IjTeA+IcIJYH6qlHzwsTgDgTRx45DcTdQLwOqPEvzrwAjJGV0MwDAiDJbUDcC9S0H1eqQgd9QBwAxMtBNgI1XsXrIZAL0DEwf4hgE8eGAQIMAJYdewWWroYnAAAAAElFTkSuQmCC',

  'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3MzdEODgwMzhBNEZFNDExODNGQUQ4RDkwMjVGMDFCQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowOTREQTg4MkQzQkExMUU1QjZEMzlDRUMyNzExQTI0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowOTREQTg4MUQzQkExMUU1QjZEMzlDRUMyNzExQTI0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ5MDEzMjcyQjFEM0U1MTFCN0FDOTU4NzYxMjlGNzY1IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTIwNmJjMDItZDE3YS0xMWU1LWI5OGMtZWZmNDQyODk5MTIxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+QfeoIgAAAIlJREFUeNpiZDx6hAEIxICYFYifMmABLFDaE4gXAPFjID4JxBeA+AYQ3wRhmCIuKC0LxSFIBukwQRmCDNjBV5CJMEUyOBRdBOK/MEUGOBSdARFMUKtMcCg6ClMkD8QnQMaiKfgPxAdgQQDyrh0QiwCxOxC7AbELEL8H4lcgRYzQwMQGxGCKAAIMACfnGR0yZMlRAAAAAElFTkSuQmCC',

  'iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3MzdEODgwMzhBNEZFNDExODNGQUQ4RDkwMjVGMDFCQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQjM0QkYyNUQzQkExMUU1QjZEMzlDRUMyNzExQTI0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQjM0QkYyNEQzQkExMUU1QjZEMzlDRUMyNzExQTI0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ5MDEzMjcyQjFEM0U1MTFCN0FDOTU4NzYxMjlGNzY1IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTIwNmJjMDItZDE3YS0xMWU1LWI5OGMtZWZmNDQyODk5MTIxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+3boKZQAAAHZJREFUeNpi/PiwkwEJOALxXSB+BBNgQpLMBeJdQLwfiGWRFbAD8WwgngTELECsBFUkwwAV2AvE1gyoQBmqyBFkwnMG7EAFiMNBCrKB+A2a5A8gTgDiXpCCV1AHwsAzqG8WwtwAAiuAOAyIpYE4CIifwlQDBBgAOxMUz4vRceUAAAAASUVORK5CYII='

];

jQuery(function($){

  var $canvas = $('#js_canvas');

  var paperArr = [];

  var stage;

  $canvas[0].width = 900;

  $canvas[0].height = 506;

  function init(){

    for(var i = 0; i < js_paper.length; i++){

      createBitmaps('data:image/jpg;base64,' + js_paper[i]);

    }

    stage = new createjs.Stage($canvas[0]);

    createjs.MotionGuidePlugin.install(createjs.Tween);

    createjs.Ticker.setFPS(60);

    createjs.Ticker.addEventListener("tick", stage);

    setInterval(function() {

      drawPaper2(stage, paperArr);

    }, 200);

  }

  function createBitmaps(url){

    var bitmap = new createjs.Bitmap(url);

    bitmap.x = -100;

    bitmap.y = -100;

    paperArr.push(bitmap);

  }

  function drawPaper(stage, arr){

    var l= 20, r=  $canvas[0].width - 20;

    var index = Math.floor(Math.random() * arr.length);

    var f = arr[index].clone();

    //f.alpha = 0.8;

    var ran = (Math.random()>0.5?-1:1);

    var startX = l + Math.random() * (r - l);

    var x = [startX + Math.random() * 30 * (Math.random()>0.5?1:-1), startX + Math.random() * 30 * (Math.random()>0.5?1:-1), startX];

    var endY = 1800;

    var y = [endY*0.3+Math.random() * 20 * (Math.random()>0.5?1:-1), endY*0.6+Math.random() * 20 * (Math.random()>0.5?1:-1), endY];

    stage.addChild(f);

    createjs.Tween.get(f)

      .to({ guide:{ path:[startX,0,  x[0],y[0],x[1],y[1],  x[2],y[2],startX,y[2]]}, rotation: (500 + Math.random() * 500)*ran, alpha: 0}, 30000 + Math.random() * 3000, createjs.Ease.linear)

      .call(function(){

        stage.removeChild(f);

      });

  }

  function drawPaper2(stage, arr){

    var l= 20, r=  $canvas[0].width - 20;

    var index = Math.floor(Math.random() * arr.length);

    var f = arr[index].clone();

    var ran = (Math.random()>0.5?-1:1);

    var startX = l + Math.random() * (r - l);

    var x = [startX + Math.random() * 30 * (Math.random()>0.5?1:-1), startX + Math.random() * 30 * (Math.random()>0.5?1:-1), startX];

    var endY = 500;

    var y = [endY*0.3+Math.random() * 20 * (Math.random()>0.5?1:-1), endY*0.6+Math.random() * 20 * (Math.random()>0.5?1:-1), endY];

    stage.addChild(f);

    createjs.Tween.get(f)

      .to({ guide:{ path:[startX,0,  x[0],y[0],x[1],y[1],  x[2],y[2],startX,y[2]]}, rotation: (500 + Math.random() * 500)*ran, alpha:0}, 10000 + Math.random() * 3000, createjs.Ease.linear)

      .wait(100)

      //.to({alpha:0}, 400)

      .call(function(){

        stage.removeChild(f);

      });

  }

  init();

});

</script>

demo: http://output.jsbin.com/davixatona

createjs 下雪实例的更多相关文章

Cocos2d-JS自定义粒子系统
除了使用Cocos2d-JS的11种内置粒子系统外,我们还可以通过创建ParticleSystem对象,并设置属性实现自定义粒子系统,通过这种方式完全可以实现我们说需要的各种效果的粒子系统.使用Par ...
Cocos2d-x中自定义粒子系统
除了使用Cocos2d-x的11种内置粒子系统外,我们还可以通过创建ParticleSystemQuad对象,并设置属性实现自定义粒子系统,通过这种方式完全可以实现我们说需要的各种效果的粒子系统.使用 ...
JavaScript面试（-------------------------------------------）
this是什么方法调用模式构造器调用模式函数调用模式 apply/call模式 this是什么 —大多语言中,’this’代表由类实例化的当前对象.在JavaScript中,’this’通常表示 ...
最近学习工作流推荐一个activiti 的教程文档
全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介协议下载源码必要的软件 ...
HTML5游戏开发引擎,初识CreateJS
CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎.打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术.你可以通过这个网站学习如何构建跨平台和跨终端游戏.这 ...
CreateJSのTweenJS、SoundJS、PreloadJS
TweenJS基础实例: var canvas = document.getElementById('myCanvas'), stage = new createjs.Stage(canvas); v ...
createjs 使用记录
createjs由几个库组成: l,easeljs,这个是核心,包括了显示列表.事件机制: 2,preloadjs,用于预加载图片等: 3,tweenjs,用于控制元件的缓动: 4,soundjs,用 ...
createjs绘制扇形的方法
扇形由三段线条组成,两条直线和一条弧线,直线可以用createjs中的lineTo函数画出,弧线用Graphics.arc函数来画. 一.关于createjs中的Graphics.Arc API Gr ...
Photoshop实例视频教程
Photoshop实例视频教程 2019/04/23 文件名大小复古街机风建筑效果图PS教程.mp4 6.63 MB 48.PS教程从零开始学——切片选择工具.mp4 20.90 MB PS教程- ...

随机推荐

HW4.16
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
问题-[Delphi]断点后怎么设置条件
1.设置一个断点(这时某行代码有个红点).2.在红点上右击->"Breakpoint properties..."->"Condition:"-&g ...
Request To JavaBean(请求对象转换为JavaBean对象)
背景: 经常要从request等对象取出值来赋入bean中,如果不用MVC框架的绑定功能的话,麻烦一参考资料 1 http://jc-dreaming.iteye.com/blog/563893 ...
安装windows7、windows8.1提示无法创建新的分区
有时候用原版系统镜像安装windows系统时,会提示“windows无法安装到这个磁盘.选中的磁盘采用GPT分区形式”,导致安装失败,下面就来讲解一下如何解决. 1.在系统提示无法安装的那一步,按住“ ...
在mysql中修改表名的sql语句
在使用mysql时,经常遇到表名不符合规范或标准,但是表里已经有大量的数据了,如何保留数据,只更改表名呢?可以通过建一个相同的表结构的表,把原来的数据导入到新表中,但是这样视乎很麻烦.能否简单使用一个 ...
LCD深度剖析
LCD 深度剖析来源:http://blog.csdn.net/hardy_2009/article/details/6922900 http://blog.csdn.net/jaylondon/a ...
backpropagate
http://blog.csdn.net/celerychen2009/article/details/8964753
oracle本月、上月、去年同月第一天最后一天
select trunc(sysdate, 'month') 本月第一天, trunc(last_day(sysdate)) 本月最后一天, trunc(add_month ...
Java JDBC批处理插入数据操作(转)
在此笔记里,我们将看到我们如何可以使用像Statement和PreparedStatement JDBC API来批量在任何数据库中插入数据.此外,我们将努力探索一些场景,如在内存不足时正常运行,以及 ...
QTreeWidget实现动态加载本地文件系统
QT之前没有接触过,之所以做这个也是被临时拉去GoldenFarm组去做渲染的客户端:还别说,虽说是第一次,做出来的这个东西倒是挺让我满意的.先说一下具体需求,然后再上图吧: 渲染时在选择场景文件时, ...

createjs 下雪 实例

createjs 下雪 实例的更多相关文章

随机推荐

热门专题

createjs 下雪实例

createjs 下雪实例的更多相关文章