JS+Canvas实现动态时钟效果

2024-07-31 13:06:29

基于Canvas制作的动态时钟demo，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>动态时钟</title>
  <script type="text/javascript" src="js/lattice.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <style type="text/css">
   *{
    padding: 0;
    margin: 0;
   }
   #canvasBox{
    border-width: 2px;
    border-color: black;
    border-style: solid;
    width: 80%;
    margin: 0 auto;
   }
  </style>
 </head>
 <body>
  <!-- 将canvas放到一个盒子中，用盒子控制canvas的位置 -->
  <div id="canvasBox">
   <canvas id="canvas">
    此浏览器不支持canvas
   </canvas>
  </div>
 </body>
</html>

lattice.js

lattice =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];

script.js

var CANVAS_WIDTH;
var CANVAS_HEIGHT = 600;
//设置点阵中圆的半径
var RADIUS = 8;
//设置时钟距离边框的位置
var MARGIN_LEFT = 100;
var MARGIN_TOP = 40;

//获取初始状态的时间
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();

//用于存储小球对象
var balls = [];
//小球颜色
var colors = ["red","orenge","yellow","green","blue","purple","pink"]

window.onload = function(){
 //获得canvas外部盒子的宽度，使canvas与外部盒子宽度相同
 var canvasBox = document.getElementById("canvasBox");
 var boxWidth = getComputedStyle(canvasBox,null);
 CANVAS_WIDTH = parseInt(boxWidth.width);

 //设置canvas宽高并获得画笔对象
 var canvas = document.getElementById("canvas");
 canvas.width = CANVAS_WIDTH;
 canvas.height = CANVAS_HEIGHT;
 var context = canvas.getContext("2d");

 //定时调用，50毫秒调用一次
 setInterval(function(){
  //绘制函数
  draw(context);
 },50);

 function draw(ctx){
  //刷新屏幕
  ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);

  //获取当前时间
  var curTime = new Date();
  var curHours = curTime.getHours();
  var curMinutes = curTime.getMinutes();
  var curSeconds = curTime.getSeconds();

  //画小时
  drawLattice(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10),ctx);
  drawLattice(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10),ctx);
  //画冒号
  drawLattice(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx);
  //画分钟
  drawLattice(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10),ctx);
  drawLattice(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10),ctx);
  //画冒号
  drawLattice(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,ctx);
  //画秒
  drawLattice(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10),ctx);
  drawLattice(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10),ctx);

  //更新时间并绘制小球
  update(context,curHours,curMinutes,curSeconds);

  //观察小球数量
  //console.log(balls.length);
 }

 //参数：
 //x：绘制数字点阵的左上角的横坐标
 //y：绘制数字点阵的左上角的纵坐标
 //num：要绘制的数字，实际上是lattice的索引，10表示冒号
 //ctx：画笔
 function drawLattice(x,y,num,ctx){
  for(var i=0;i<lattice[num].length;i++){
   for(var j=0;j<lattice[num][i].length;j++){
    if(lattice[num][i][j]==1){
     ctx.beginPath();
     ctx.fillStyle = "blue";
     ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
     ctx.fill();
     ctx.closePath();
    }
   }
  }
 }

 //更新时间并绘制小球
 function update(ctx,curHours,curMinutes,curSeconds){
  if(seconds!=curSeconds){
   //更新小时
   if(parseInt(curHours/10)!=parseInt(hours/10)){
    addBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10));
   }
   if(parseInt(curHours%10)!=parseInt(hours%10)){
    addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));
   }
   //更新分钟
   if(parseInt(curMinutes/10)!=parseInt(minutes/10)){
    addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));
   }
   if(parseInt(curMinutes%10)!=parseInt(minutes%10)){
    addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));
   }
   //更新秒
   if(parseInt(curSeconds/10)!=parseInt(seconds/10)){
    addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));
   }
   if(parseInt(curSeconds%10)!=parseInt(seconds%10)){
    addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10));
   }

   //更新所有时间
   hours = curHours;
   minutes = curMinutes;
   seconds = curSeconds;
  }
  //绘制小球
  drawBalls(ctx);
  //更新小球运动
  updateBalls();
 }

 //添加单个小球
 //参数：
 //x：小球的横坐标
 //y：小球的纵坐标
 //num：变化的时间数字
 function addBalls(x,y,num){
  for(var i=0;i<lattice[num].length;i++){
   for(var j=0;j<lattice[num][i].length;j++){
    if(lattice[num][i][j]==1){
     //添加一个小球对象
     var ball = {
      //坐标
      x:x+j*2*(RADIUS+1)+(RADIUS+1),
      y:y+i*2*(RADIUS+1)+(RADIUS+1),
      //重力加速度
      g:1.5+Math.random(),
      //x、y方向的速度
      vx:Math.pow(-1,Math.ceil(Math.random()*1000))*5,
      vy:-5,
      //小球颜色
      color:colors[Math.floor(Math.random()*colors.length)]
     }
     //将小球添加进储存队列中
     balls.push(ball);
    }
   }
  }
 }

 //绘制小球
 function drawBalls(ctx){
  for(var i=0;i<balls.length;i++){
   ctx.beginPath();
   ctx.fillStyle = balls[i].color;
   ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
   ctx.fill();
   ctx.closePath();
  }
 }

 //更新小球运动
 function updateBalls(){
  //更新储存数组中的小球的动态
  for(var i=0;i<balls.length;i++){
   balls[i].x += balls[i].vx;
   balls[i].y += balls[i].vy;
   balls[i].vy += balls[i].g;

   //边缘碰撞检测
   if(balls[i].y>=CANVAS_HEIGHT-RADIUS){
    balls[i].y=CANVAS_HEIGHT-RADIUS;
    //模拟碰撞反弹和阻力
    balls[i].vy=-balls[i].vy*0.6;
   }
  }
  //当小球滚出画布便可以从数组中删除，以下是删除算法
  //储存应当保留的小球的数量
  var numBall = 0;
  for(var i=0;i<balls.length;i++){
   if(balls[i].x+RADIUS>0&&balls[i].x-RADIUS<CANVAS_WIDTH){
    //若判断当前小球在屏幕内，则将此小球尽量靠前，则每次循环后，数组最后面的小球就是滚出画布的小球
    balls[numBall] = balls[i];
    numBall++;
   }
  }
  //从数组后面删除小球
  while(balls.length>numBall){
   balls.pop();
  }
 }
};

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js Canvas绘制圆形时钟效果

本文实例为大家分享了js Canvas圆形时钟的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas Clock</title> <style type="text/css"> div{ text-align: center; margin-top: 250px
JS+H5 Canvas实现时钟效果

用JavaScript+Canvas来实现最简单的时钟效果,供大家参考,具体内容如下效果图: 先看html代码: <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/demo3.js" ></script> </head>
html5 canvas js(数字时钟)实例代码

复制代码代码如下: <!doctype html><html> <head> <title>canvas dClock</title> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 您的浏览
JS+Canvas绘制时钟效果

本文实例为大家分享了使用canvas绘制时钟的具体代码,供大家参考,具体内容如下 1. clock.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Description" content=""> <title>canvas时钟</t
JavaScript html5 canvas绘制时钟效果

本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
JS+Canvas绘制动态时钟效果

本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; margin-left:-250px; border:5px solid #
js Canvas实现圆形时钟教程

阅读本文需要一点关于canvas基本用法的基础,本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程第一步:新建一个最简单的html文件,并且在<body>标签中定义元素canvas. canvas.html <html> <head> <title>Canvas clock tutorial</title> </head> <body> <canvas id="clock" wid
JavaScript学习小结之使用canvas画“哆啦A梦”时钟

前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的hello world,也算是一种进步咯~ 好的各位,请上车的乘客往里走,请不要堵塞通道,谢谢.我们开车吧~ 正文: 今天先上图吧,看看效果再说今天的蓝胖子长这样,看到它还是这么胖,我就放心了.这世界还是充满正能量的,总归还有人比我胖,哈哈哈然后是上代码 html部分 <canvas id="
js+html5实现canvas绘制网页时钟的方法

本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex
javascript结合Canvas 实现简易的圆形时钟

之前学习了下html5中的canvas元素,为了练练手就实现了一个简易的时钟.时钟本身并不复杂,也没有使用图片进行美化,不过麻雀虽小五脏俱全,下面就与大家分享一下: 演示效果: html代码: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

JS+Canvas实现动态时钟效果

相关推荐

随机推荐