首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

canvas时钟效果

Posted in Javascript onFebruary 16, 2017

效果如下：

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时钟效果

- Author -

59580

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
支持移动端原生js轮播图
Feb 16 #Javascript
jQuery为DOM动态追加事件的方法
Feb 16 #Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 #Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 #Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 #Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 #Javascript
bootstrap中添加额外的图标实例代码
Feb 15 #Javascript
美国航天局(1) 数据(1) 毅力号(1) 火星(2) 人造肉(1) 太空(1) 天问一号(1) 塑料(1) 酶(1) NASA(1)
You might like
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
node.js中路由，中间件，ge请求和post请求的参数详解
2017/12/26 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
python返回数组的索引实例
2019/11/28 Python
Python 列表的清空方式
2020/01/13 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
理肤泉美国官网：La Roche-Posay
2018/01/17 全球购物
Redbubble法国：由独立艺术家设计的独特产品
2019/01/08 全球购物
POS解决方案：MUNBYN（热敏打印机、条形码扫描仪）
2020/06/09 全球购物
行政人事专员岗位职责
2014/03/05 职场文书
2014年营销工作总结
2014/11/22 职场文书
2015年社区工作总结
2015/04/08 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
总经理年会致辞
2015/07/29 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL