canvas时钟效果

2024-10-21 18:02:30

效果如下：

代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>canvas时钟</title>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 </style>
 <script>
 window.onload = function(){
 var WINDOW_WIDTH = document.body.scrollWidth;
 var WINDOW_HEIGHT = document.body.scrollHeight-10;
 var RADIUS = 7; //球半径
 var NUMBER_GAP = 10; //数字之间的间隙
 var u = 0.65; //碰撞能量损耗系数
 var context; //Canvas绘制上下文
 var balls = []; //存储彩色的小球
 const colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]; //彩色小球的颜色
 var currentNums = []; //屏幕显示的8个字符
 var digit = [
  [
  [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]
  ] //:
 ];
 function drawDatetime(cxt) {
  var nums = [];
  var date = new Date();
  var hours = date.getHours();
  var num1 = Math.floor(hours / 10);
  var num2 = hours % 10;
  context.fillStyle = colors[(date.getSeconds()%10)];
  var offsetX = WINDOW_WIDTH/4,
  offsetY = 30;
  nums.push({
  num: num1
  });
  nums.push({
  num: num2
  });
  nums.push({
  num: 10
  }); //冒号
  var minutes = date.getMinutes();
  var num1 = Math.floor(minutes / 10);
  var num2 = minutes % 10;
  nums.push({
  num: num1
  });
  nums.push({
  num: num2
  });
  nums.push({
  num: 10
  }); //冒号
  var seconds = date.getSeconds();
  var num1 = Math.floor(seconds / 10);
  var num2 = seconds % 10;
  nums.push({
  num: num1
  });
  nums.push({
  num: num2
  });
  for(var x = 0; x < nums.length; x++) {
  nums[x].offsetX = offsetX;
  offsetX = drawSingleNumber(offsetX, offsetY, nums[x].num, cxt);
  //两个数字连一块，应该间隔一些距离
  if(x < nums.length - 1) {
  if((nums[x].num != 10) && (nums[x + 1].num != 10)) {
  offsetX += NUMBER_GAP;
  }
  }
  }
  //说明这是初始化
  if(currentNums.length == 0) {
  currentNums = nums;
  } else {
  //进行比较
  for(var index = 0; index < currentNums.length; index++) {
  if(currentNums[index].num != nums[index].num) {
  //不一样时，添加彩色小球
  addBalls(nums[index]);
  currentNums[index].num = nums[index].num;
  }
  }
  }
  renderBalls(cxt);
  updateBalls();
  return date;
 }
 function addBalls(item) {
  var num = item.num;
  var numMatrix = digit[num];
  for(var y = 0; y < numMatrix.length; y++) {
  for(var x = 0; x < numMatrix[y].length; x++) {
  if(numMatrix[y][x] == 1) {
  var ball = {
   offsetX: item.offsetX + RADIUS + RADIUS * 2 * x,
   offsetY: 30 + RADIUS + RADIUS * 2 * y,
   color: colors[Math.floor(Math.random() * colors.length)],
   g: 1.5 + Math.random(),
   vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4 + Math.random(),
   vy: -5
  }
  balls.push(ball);
  }
  }
  }
 }
 function renderBalls(cxt) {
  for(var index = 0; index < balls.length; index++) {
  cxt.beginPath();
  cxt.fillStyle = balls[index].color;
  cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2 * Math.PI);
  cxt.fill();
  }
 }
 function updateBalls() {
  var i = 0;
  for(var index = 0; index < balls.length; index++) {
  var ball = balls[index];
  ball.offsetX += ball.vx;
  ball.offsetY += ball.vy;
  ball.vy += ball.g;
  if(ball.offsetY > (WINDOW_HEIGHT - RADIUS)) {
  ball.offsetY = WINDOW_HEIGHT - RADIUS;
  ball.vy = -ball.vy * u;
  }
  if(ball.offsetX > RADIUS && ball.offsetX < (WINDOW_WIDTH - RADIUS)) {
  balls[i] = balls[index];
  i++;
  }
  }
  //去除出边界的球
  for(; i < balls.length; i++) {
  balls.pop();
  }
 }
 function drawSingleNumber(offsetX, offsetY, num, cxt) {
  var numMatrix = digit[num];
  for(var y = 0; y < numMatrix.length; y++) {
  for(var x = 0; x < numMatrix[y].length; x++) {
  if(numMatrix[y][x] == 1) {
  cxt.beginPath();
  cxt.arc(offsetX + RADIUS + RADIUS * 2 * x, offsetY + RADIUS + RADIUS * 2 * y, RADIUS, 0, 2 * Math.PI);
  cxt.fill();
  }
  }
  }
  cxt.beginPath();
  offsetX += numMatrix[0].length * RADIUS * 2;
  return offsetX;
 }
 var canvas = document.getElementById("canvas");
 canvas.width = WINDOW_WIDTH;
 canvas.height = WINDOW_HEIGHT;
 context = canvas.getContext("2d");
 //记录当前绘制的时刻
 var currentDate = new Date();
 setInterval(function() {
  //清空整个Canvas，重新绘制内容
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  drawDatetime(context);
 }, 50)
 }
 </script>
 </head>
 <body>
 <canvas id="canvas"></canvas>
 </body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

js Canvas实现圆形时钟教程

阅读本文需要一点关于canvas基本用法的基础,本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程第一步:新建一个最简单的html文件,并且在<body>标签中定义元素canvas. canvas.html <html> <head> <title>Canvas clock tutorial</title> </head> <body> <canvas id="clock" wid
js Canvas实现的日历时钟案例分享

Html: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="requestNextAnimationFrame.js"></script> <script src="calendarWithTime.js">&
JavaScript学习小结之使用canvas画“哆啦A梦”时钟

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

话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas绘制表盘</title> </head> <body> <canvas id='box' width="500" height="500" > 您的
html5 canvas js(数字时钟)实例代码

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

前面的话本文将使用canvas实现粒子时钟效果效果展示点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组通过遍历数字点阵的二维数组,当该位置的值为1时,则绘制一个粒子,否则不绘制将绘制数字的函数命名为renderDigit().在该函数中,将粒子绘制为一个小圆.小圆的半径为R,小圆所占据的矩形宽(高)为2(R+1).由于数字点阵是10*7的二维数组,所以一个数字的宽度为14(R+1),高度为20(
JavaScript html5 canvas绘制时钟效果(二)

对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了.今天我们就用canvas来做一个小小的时钟.完整的代码在这里https://github.com/wwervin72/HTML5-Clock. 那么首先在这个页面里面我使用了两个canvas,一个用来绘制静态的时钟表盘和刻度,另一个用来绘制时钟的三个指针,然后用定位让他们重合到一起.然后这里没什么
JS+Canvas绘制时钟效果

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

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

canvas时钟效果

相关推荐

随机推荐