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

随机推荐

android camera(四)：camera 驱动 GT2005
摄像头主要参数: 1.MCLK 24MHz: 2.PCLK 48~52MHz~: 3.电压 1.8V(1.5V).2.8V: 4.scl(IIC时钟)100KHz或者400KHz. 下载:常用摄像 ...
Device Tree常用方法解析
Device Tree常用方法解析 Device Tree在Linux内核驱动中的使用源于2011年3月17日Linus Torvalds在ARM Linux邮件列表中的一封邮件,他宣称“this w ...
OpenCL memory object 之 Global memory (1)
本文转载自:http://www.cnblogs.com/mikewolf2002/archive/2011/12/17/2291239.html 这篇日志是学习AMD OpenCL文档时候的总结. ...
Project Euler 9
题意:三个正整数a + b + c = 1000,a*a + b*b = c*c.求a*b*c. 解法:可以暴力枚举,但是也有数学方法. 首先,a,b,c中肯定有至少一个为偶数,否则和不可能为以上两个 ...
B树，B-树，B+树，B*树
B树即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...
hdoj 2401 Baskets of Gold Coins
Baskets of Gold Coins Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
NoSQL数据库的四大分类表格分析
MongoDB 复制集(二) 选举自动故障切换
一复制集的高可用性简介复制集通过故障自动切换来实现高可用性,当主节点出现故障的时候,从节点可以通过选举成为主节点,而这个过程在大多数当情况下是自动进行的,不需要手动干预.在某些情况 ...
pod 命令-bash: --: command not found
pod 命令-bash: --: command not found 升级完系统执行 pod update 或者 pod install命令的时候出现: -bash: --: command not ...
【设计模式 - 22】之策略模式（Strategy）
1 模式简介在策略模式中,一个类的行为或其算法可以在运行时改变.策略模式定义了一系列算法,把它们一个个封装起来,并且使它们可以互相替换. 策略模式的优点: 1) 算法可以自由 ...

createjs 下雪 实例

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

随机推荐

热门专题

createjs 下雪实例

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