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

随机推荐

poj 3237 Tree（树链剖分，线段树）
Tree Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 7268 Accepted: 1969 Description ...
flushall()函数的用法
flushall()函数如下所示的一个非常简单的程序. #include void main(void) { char cA,cB; printf("input cA and cB:\n& ...
SOA技术的进化史
SOA 是一种程序设计思想,其实早在远古时代(计算机史)它就已经出现了.无非就是把系统分解,将数据和业务逻辑部分尽量独立出来,然后以服务形式提供给另外的系统共用. 那时也有一些可以实现 SOA 的工具 ...
解决IE11不能进行webTest脚本录制的方法
当win7的ie8升级到ie11后,我的vs2012里的web性能测试用不了了,在打开IE11后,录制栏不见了,在网上找了很多资料没有结果,最后,在IE工具里发展了原因工具->管理加载项-&g ...
笔记本开了WIFI之后只能上QQ，上不了网页的解决方法
前几天拉了宽带之后,开了WIFI,发现WIFI能上网,但是电脑就上不了网页. 把本地连接的DNS指定一下,(电信)指定为202.102.192.68
extern用法总结！
extern 在源文件A里定义的函数,在其他源文件中是看不见的(即不能訪问).为了在源文件B里能调用这个函数,应该在B的头部加上一个外部声明: extern 函数原型: 这样,在源文件B里也能够调 ...
ngnix apache tomcat集群负载均衡配置
http://w.gdu.me/wiki/Java/tomcat_cluster.html 参考: Tomcat与Apache或Nginx的集群负载均衡设置: http://huangrs.blog. ...
[Javascript] delete keyword
delete keyword doesn't actually delete the value but just the reference. var me = { name: { first: & ...
Android M 新的运行时权限开发者需要知道的一切
android M 的名字官方刚发布不久,最终正式版即将来临!android在不断发展,最近的更新 M 非常不同,一些主要的变化例如运行时权限将有颠覆性影响.惊讶的是android社区鲜有谈论这事儿, ...
oracle10 权限角色
管理权限和角色介绍这一部分我们主要看看oracle中如何管理权限和角色,权限和角色的区别在那里. 当刚刚建立用户时,用户没有任何权限,也不能执行任何操作,oracle数据库会自动创建一个方案, ...

createjs 下雪 实例

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

随机推荐

热门专题

createjs 下雪实例

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