全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：400-708-3566

canvas时钟效果

效果如下：

代码如下：

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

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


# canvas  # 时钟  # canvas实现粒子时钟效果  # canvas绘制表盘时钟  # js Canvas实现的日历时钟案例分享  # js Canvas实现圆形时钟教程  # JavaScript学习小结之使用canvas画“哆啦A梦”时钟  # JS+Canvas绘制时钟效果  # js+html5实现canvas绘制网页时钟的方法  # JavaScript html5 canvas绘制时钟效果(二)  # javascript结合Canvas 实现简易的圆形时钟  # html5 canvas js(数字时钟)实例代码  # 这是  # 清空  # 球半  # NUMBER_GAP  # RADIUS 


相关文章： 常州企业建站如何选择最佳模板？  北京网站制作的公司有哪些,北京白云观官方网站？  建站之星安装后如何自定义网站颜色与字体？  网站制作知乎推荐,想做自己的网站用什么工具比较好？  个人摄影网站制作流程,摄影爱好者都去什么网站？  如何在IIS管理器中快速创建并配置网站？  建站之星在线客服如何快速接入解答？  如何用VPS主机快速搭建个人网站？  如何自定义建站之星模板颜色并下载新样式？  建站之星五站合一营销型网站搭建攻略，流量入口全覆盖优化指南  北京制作网站的公司,北京铁路集团官方网站？  如何在橙子建站中快速调整背景颜色？  如何彻底卸载建站之星软件？  c++23 std::expected怎么用 c++优雅处理函数错误返回【详解】  h5网站制作工具有哪些,h5页面制作工具有哪些？  如何选择高效可靠的多用户建站源码资源？  如何制作网站标识牌,动态网站如何制作（教程）？  定制建站如何定义？其核心优势是什么？  建站之星如何实现网站加密操作？  nginx修改上传文件大小限制的方法  制作网站公司那家好,网络公司是做什么的？  建站之星IIS配置教程：代码生成技巧与站点搭建指南  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  php能控制zigbee模块吗_php通过串口与cc2530 zigbee通信【介绍】  小建面朝正北，A点实际方位是否存在偏差？  如何在服务器上配置二级域名建站？  如何在搬瓦工VPS快速搭建网站？  湖州网站制作公司有哪些,浙江中蓝新能源公司官网？  已有域名和空间如何快速搭建网站？  如何在阿里云通过域名搭建网站？  如何快速搭建高效香港服务器网站？  教育培训网站制作流程,请问edu教育网站的域名怎么申请？  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  活动邀请函制作网站有哪些,活动邀请函文案？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  如何通过VPS建站无需域名直接访问？  盐城做公司网站,江苏电子版退休证办理流程？  建站之星ASP如何实现CMS高效搭建与安全管理？  如何挑选最适合建站的高性能VPS主机？  如何选择服务器才能高效搭建专属网站？  网站设计制作公司地址,网站建设比较好的公司都有哪些？  装修招标网站设计制作流程,装修招标流程？  定制建站策划方案_专业建站与网站建设方案一站式指南  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  代刷网站制作软件,别人代刷火车票靠谱吗？  如何快速选择适合个人网站的云服务器配置？  c# Task.ConfigureAwait(true) 在什么场景下是必须的  如何在Golang中引入测试模块_Golang测试包导入与使用实践 

返回目录 在线咨询
上一篇： 本子设计,本子批发的网站有哪些？
下一篇：数据备份策略：租用服务器空间时的数据备份服务是如何运作的？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

©  云南转妮洋科技有限公司 版权所有   滇ICP备2024034437号 
联系电话： 400-708-3566   E-mail：915688610@qq.com
主营业务：网络营销推广、网站SEO优化、网站定制、营销型网站建设、微商城制作、三级分销系统开发
电话沟通
在线客服