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教程- ...

随机推荐

白帽子讲Web安全2.pdf
XSS构造技巧利用字符编码: var redirectUrl="\";alert(/XSS/);"; 本身没有XSS漏洞,但由于返回页面是GBK/GB2312编码的“% ...
JavaScript高级程序设计59.pdf
dropEffect和effectAllowed 利用dataTransfer对象,传输数据.确定被拖动元素以及作为放置目标的元素能够接受什么操作,为此需要访问对象的两个属性dropEffect和ef ...
Windows和Ubuntu双系统，修复UEFI引导的两种办法
查看ubuntu是否是从 efi/uefi 启动的方法: 若 /sys/firmware/efi 存在则是,否则不是.shell命令: [ -d /sys/firmware/efi ] && ...
java之Comparator与Comparable
转自:http://blog.csdn.net/zhangerqing 当需要排序的集合或数组不是单纯的数字型时,通常可以使用Comparator或Comparable,以简单的方式实现对象排序或自定 ...
Hibernate查询方法总结
1. HQL查询 HQL是Hiberante官方推荐的Hibernate检索方式,它使用类似SQL的查询语言,以面向对象的方式从数据库中查询.可以使用HQL查询具有继承.多态和关联关系的数据.在检索 ...
Windows2008安装IIS方法
1.右键点击 “计算机”,在弹出菜单中选择“管理”选项,在服务器管理器左侧界面点击 “角色”选项,如下图: 2.点击“添加角色”按钮后,弹出如下界面 3.选择“角色”列表中的“Web服务器(IIS) ...
将动态库添加到VC程序中
应用程序使用DLL可以采用两种方式:一种是隐式链接,另一种是显式链接.在使用DLL之前首先要知道DLL中函数的结构信息.Visual C++6.0在VC\bin目录下提供了一个名为Dumpbin.ex ...
[WebGL入门]十四，绘制多边形
注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...
tcpreplay安装使用
#Author: ypguo#Data: 2010.4.23#Version: 1.2 增加了修改VLAN tag内容. 1.1 修改了cygwin下安装的内容 ...
3行3列表格 table实现，div+css实现
table实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

createjs 下雪 实例

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

随机推荐

热门专题

createjs 下雪实例

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