canvas时钟效果

2019-11-19 17:33:40

字体：大中小

来源：转载

供稿：网友

效果如下：

代码如下：

<!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>

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

上一篇：jQuery实现搜索页面关键字的功能

下一篇：支持移动端原生js轮播图