• 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

  • 相关阅读:
    mysql的安装、启动和基础配置 —— windows版本
    Navicat安装及简单使用
    期货黄金与现货黄金比较
    android 网络编程--socket tcp/ip udp http之间的关系
    socket、tcp、udp、http 的认识及区别
    Android数据传递的五种方法汇总
    android 应用程序Activity之间数据传递与共享的几种途径
    Android数据存储的五种方法汇总
    Android终端与服务器数据传输解决方案
    转载 解决Android与服务器交互大容量数据问题
  • 原文地址:https://www.cnblogs.com/zlog/p/5997427.html
Copyright © 2020-2023  润新知