1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <canvas id="canvas" style="width:500px;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>
  9. <script src="js/canvasTime.js" type="text/javascript" ></script>
  10. </body>
  11. </html>

ＪＳ封装

  1. (function(){ 
  2.  
  3.    var digit=
  4.     [
  5.         [
  6.             [0,0,1,1,1,0,0],
  7.             [0,1,1,0,1,1,0],
  8.             [1,1,0,0,0,1,1],
  9.             [1,1,0,0,0,1,1],
  10.             [1,1,0,0,0,1,1],
  11.             [1,1,0,0,0,1,1],
  12.             [1,1,0,0,0,1,1],
  13.             [1,1,0,0,0,1,1],
  14.             [0,1,1,0,1,1,0],
  15.             [0,0,1,1,1,0,0]
  16.         ],//
  17.         [
  18.             [0,0,0,1,1,0,0],
  19.             [0,1,1,1,1,0,0],
  20.             [0,0,0,1,1,0,0],
  21.             [0,0,0,1,1,0,0],
  22.             [0,0,0,1,1,0,0],
  23.             [0,0,0,1,1,0,0],
  24.             [0,0,0,1,1,0,0],
  25.             [0,0,0,1,1,0,0],
  26.             [0,0,0,1,1,0,0],
  27.             [1,1,1,1,1,1,1]
  28.         ],//
  29.         [
  30.             [0,1,1,1,1,1,0],
  31.             [1,1,0,0,0,1,1],
  32.             [0,0,0,0,0,1,1],
  33.             [0,0,0,0,1,1,0],
  34.             [0,0,0,1,1,0,0],
  35.             [0,0,1,1,0,0,0],
  36.             [0,1,1,0,0,0,0],
  37.             [1,1,0,0,0,0,0],
  38.             [1,1,0,0,0,1,1],
  39.             [1,1,1,1,1,1,1]
  40.         ],//
  41.         [
  42.             [1,1,1,1,1,1,1],
  43.             [0,0,0,0,0,1,1],
  44.             [0,0,0,0,1,1,0],
  45.             [0,0,0,1,1,0,0],
  46.             [0,0,1,1,1,0,0],
  47.             [0,0,0,0,1,1,0],
  48.             [0,0,0,0,0,1,1],
  49.             [0,0,0,0,0,1,1],
  50.             [1,1,0,0,0,1,1],
  51.             [0,1,1,1,1,1,0]
  52.         ],//
  53.         [
  54.             [0,0,0,0,1,1,0],
  55.             [0,0,0,1,1,1,0],
  56.             [0,0,1,1,1,1,0],
  57.             [0,1,1,0,1,1,0],
  58.             [1,1,0,0,1,1,0],
  59.             [1,1,1,1,1,1,1],
  60.             [0,0,0,0,1,1,0],
  61.             [0,0,0,0,1,1,0],
  62.             [0,0,0,0,1,1,0],
  63.             [0,0,0,1,1,1,1]
  64.         ],//
  65.         [
  66.             [1,1,1,1,1,1,1],
  67.             [1,1,0,0,0,0,0],
  68.             [1,1,0,0,0,0,0],
  69.             [1,1,1,1,1,1,0],
  70.             [0,0,0,0,0,1,1],
  71.             [0,0,0,0,0,1,1],
  72.             [0,0,0,0,0,1,1],
  73.             [0,0,0,0,0,1,1],
  74.             [1,1,0,0,0,1,1],
  75.             [0,1,1,1,1,1,0]
  76.         ],//
  77.         [
  78.             [0,0,0,0,1,1,0],
  79.             [0,0,1,1,0,0,0],
  80.             [0,1,1,0,0,0,0],
  81.             [1,1,0,0,0,0,0],
  82.             [1,1,0,1,1,1,0],
  83.             [1,1,0,0,0,1,1],
  84.             [1,1,0,0,0,1,1],
  85.             [1,1,0,0,0,1,1],
  86.             [1,1,0,0,0,1,1],
  87.             [0,1,1,1,1,1,0]
  88.         ],//
  89.         [
  90.             [1,1,1,1,1,1,1],
  91.             [1,1,0,0,0,1,1],
  92.             [0,0,0,0,1,1,0],
  93.             [0,0,0,0,1,1,0],
  94.             [0,0,0,1,1,0,0],
  95.             [0,0,0,1,1,0,0],
  96.             [0,0,1,1,0,0,0],
  97.             [0,0,1,1,0,0,0],
  98.             [0,0,1,1,0,0,0],
  99.             [0,0,1,1,0,0,0]
  100.         ],//
  101.         [
  102.             [0,1,1,1,1,1,0],
  103.             [1,1,0,0,0,1,1],
  104.             [1,1,0,0,0,1,1],
  105.             [1,1,0,0,0,1,1],
  106.             [0,1,1,1,1,1,0],
  107.             [1,1,0,0,0,1,1],
  108.             [1,1,0,0,0,1,1],
  109.             [1,1,0,0,0,1,1],
  110.             [1,1,0,0,0,1,1],
  111.             [0,1,1,1,1,1,0]
  112.         ],//
  113.         [
  114.             [0,1,1,1,1,1,0],
  115.             [1,1,0,0,0,1,1],
  116.             [1,1,0,0,0,1,1],
  117.             [1,1,0,0,0,1,1],
  118.             [0,1,1,1,0,1,1],
  119.             [0,0,0,0,0,1,1],
  120.             [0,0,0,0,0,1,1],
  121.             [0,0,0,0,1,1,0],
  122.             [0,0,0,1,1,0,0],
  123.             [0,1,1,0,0,0,0]
  124.         ],//
  125.         [
  126.             [0,0,0,0,0,0,0],
  127.             [0,0,1,1,1,0,0],
  128.             [0,0,1,1,1,0,0],
  129.             [0,0,1,1,1,0,0],
  130.             [0,0,0,0,0,0,0],
  131.             [0,0,0,0,0,0,0],
  132.             [0,0,1,1,1,0,0],
  133.             [0,0,1,1,1,0,0],
  134.             [0,0,1,1,1,0,0],
  135.             [0,0,0,0,0,0,0]
  136.         ]//:
  137.     ];
  138.  
  139.     var canvas = document.getElementById('canvas');
  140.     //声明canvas的宽高
  141.     var H = 100,W = 700;
  142.     canvas.height = H;
  143.     canvas.width = W;
  144.     if(canvas.getContext){
  145.         var cxt = canvas.getContext('2d');
  146.     }
  147.     cxt.fillStyle = '#f00';
  148.     cxt.fillRect(10,10,50,50);        
  149.  
  150.     //存储时间数据
  151.     var data = [];
  152.     //存储运动的小球
  153.     var balls = [];
  154.     //设置粒子半径
  155.     var R = canvas.height/20-1;//改变粒子大小
  156.     (function(){
  157.         var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
  158.         //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
  159.         data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
  160.     })();
  161.  
  162.     /*生成点阵数字*/
  163.     function renderDigit(index,num){
  164.         for(var i = 0; i < digit[num].length; i++){
  165.             for(var j = 0; j < digit[num][i].length; j++){
  166.                 if(digit[num][i][j] == 1){
  167.                     cxt.beginPath();
  168.                     cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
  169.                     cxt.closePath();
  170.                     cxt.fill();
  171.                 }
  172.             }
  173.         }
  174.     }
  175.  
  176.     /*更新时钟*/
  177.     function updateDigitTime(){
  178.         var changeNumArray = [];
  179.         var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
  180.         var NewData = [];
  181.         NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
  182.         for(var i = data.length-1; i >=0 ; i--){
  183.             //时间发生变化
  184.             if(NewData[i] !== data[i]){
  185.                 //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
  186.                 changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
  187.             }
  188.         }
  189.         //增加小球
  190.         for(var i = 0; i< changeNumArray.length; i++){
  191.             addBalls.apply(this,changeNumArray[i].split('_'));
  192.         }
  193.         data = NewData.concat();
  194.     }
  195.  
  196.     /*更新小球状态*/
  197.     function updateBalls(){
  198.         for(var i = 0; i < balls.length; i++){
  199.             balls[i].stepY += balls[i].disY;
  200.             balls[i].x += balls[i].stepX;
  201.             balls[i].y += balls[i].stepY;
  202.             if(balls[i].x > W + R || balls[i].y > H + R){
  203.                 balls.splice(i,1);
  204.                 i--;
  205.             }
  206.         }
  207.     }
  208.  
  209.     /*增加要运动的小球*/
  210.     function addBalls(index,num){
  211.         var numArray = [1,2,3];
  212.         var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
  213.         for(var i = 0; i < digit[num].length; i++){
  214.             for(var j = 0; j < digit[num][i].length; j++){
  215.                 if(digit[num][i][j] == 1){
  216.                     var ball = {
  217.                         x:14*(R+2)*index + j*2*(R+1)+(R+1),
  218.                         y:i*2*(R+1)+(R+1),
  219.                         stepX:Math.floor(Math.random() * 4 -2),
  220.                         stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
  221.                         color:colorArray[Math.floor(Math.random()*colorArray.length)],
  222.                         disY:1
  223.                     };
  224.                     balls.push(ball);
  225.                 }
  226.             }
  227.         }
  228.     }
  229.  
  230.     /*渲染*/
  231.     function render(){
  232.         //重置画布宽度，达到清空画布的效果
  233.         canvas.height = 100;
  234.         //渲染时钟
  235.         for(var i = 0; i < data.length; i++){
  236.             renderDigit(i,data[i]);
  237.         }
  238.         //渲染小球
  239.         for(var i = 0; i < balls.length; i++){
  240.             cxt.beginPath();
  241.             cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
  242.             cxt.fillStyle = balls[i].color;
  243.             cxt.closePath();
  244.             cxt.fill();
  245.         }
  246.     }
  247.  
  248.     clearInterval(oTimer);
  249.     var oTimer = setInterval(function(){
  250.         //更新时钟
  251.         updateDigitTime();
  252.         //更新小球状态
  253.         updateBalls();
  254.         //渲染
  255.         render();
  256.     },50);
  257.  
  258. })();
  259.

canvas时间粒子的更多相关文章

  1. HTML5 Canvas时间效果

    Canvas 时间效果: function clockTest() { var canvas = document.getElementById('canvas'); if (!(canvas &am ...

  2. HTML5 <Canvas>文字粒子化

    文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  3. canvas放射粒子效果

    这个也是别人的代码,就不多介绍了 写了些注释 body { overflow:hidden; margin:0; padding:0; background-color:#222222 } </ ...

  4. 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...

  5. canvas多彩粒子星空背景

    HTML5 canvas 实现多颜色粒子星空页面背景,喜欢的可以收藏.自己可以定义颜色,粒子透明度,粒子数量,粒子大小. 预览效果图如下: 1.获取canvas上下文,并且动态设置canvas尺寸和屏 ...

  6. canvas背景粒子动态变化动画

    var canvas = document.getElementById("cas"); var ctx = canvas.getContext("2d"); ...

  7. canvas实现粒子星空连线

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>离 ...

  8. canvas粒子时钟

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...

  9. 带着canvas去流浪系列之九 粒子动画【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

随机推荐

  1. MIT 6.824学习笔记1 MapReduce

    本节内容:Lect 1 MapReduce框架的执行过程: master分发任务,把map任务和reduce任务分发下去 map worker读取输入,进行map计算写入本地临时文件 map任务完成通 ...

  2. 认识Mybatis

    什么是Mybatis? MyBatis 是一款优秀的基于Java的持久层框架(来源于“internet”和“abatis”的组合),它支持定制化 SQL.存储过程以及高级映射. MyBatis 避免了 ...

  3. Vue打包后访问静态资源路径问题

    Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们知道,执行npm run buil ...

  4. CSS-03 queue方法

    queue方法 摘自W3C school手册,用于简单理解使用queue方法 队列 每个元素均可拥有一到多个由 jQuery 添加的函数队列.在大多数应用程序中,只使用一个队列(名为 fx).队列运行 ...

  5. RabbitMQ ——与Spring集成及exchange的direct、topic方式实现和简单队列实现

    程序整体结构 Maven依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...

  6. rpmdeps - 生成 RPM 软件包依赖关系

    SYNOPSIS rpmdeps {-P|--provides} {-R|--requires} FILE ... DESCRIPTION rpmdeps 根据 FILE 参数集合,生成软件包依赖关系 ...

  7. Codeforces Round #393 (Div. 2) - A

    题目链接:http://codeforces.com/contest/760/problem/A 题意:给定一个2017年的月份和该月的第一天的星期,问该月份的日历表中需要多少列.行有7列表示星期一~ ...

  8. 抽象类（abstract）与接口（interface）的区别

    如果一个类中包含抽象方法,那么这个类就是抽象类.abstract只能用来修饰类或者方法,不能用来修饰属性. 接口是指一个方法的集合,接口中的所有方法都没有方法体.接口通过关键字interface实现. ...

  9. Codeforces 633F 树的直径/树形DP

    题意:有两个小孩玩游戏,每个小孩可以选择一个起始点,并且下一个选择的点必须和自己选择的上一个点相邻,问两个选的点权和的最大值是多少? 思路:首先这个问题可以转化为求树上两不相交路径的点权和的最大值,对 ...

  10. spark数据分析导论

    1.spark的定义 spark是一个用来实现快速而通用的集群计算平台,高效的支持更多计算模式,包括交互式查询和流处理. 主要特点就是能够在内存中进行计算,即使在磁盘上进行计算依然比mapreduce ...