首页
所有分类
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 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
用WebStorm进行Angularjs 2开发(环境篇：Windows 10，Angular-cli方式)
Dec 05 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
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
mt-swipe(1) 慢日志(1) REST(1) Spring Bean(1) Mint UI(1) exists(2) cmd(1) Spring JPA(1) Switch(1) 远程桌面(2)
You might like
文件上传的实现
2006/10/09 PHP
php 获取本地IP代码
2013/06/23 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
vue组件间通信解析
2017/03/01 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的使用详解
2017/05/12 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
Vue实现手机号、验证码登录（60s禁用倒计时）
2020/12/19 Vue.js
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python对日志进行处理的实例代码
2018/10/06 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
python 模拟登录B站的示例代码
2020/12/15 Python
求职简历自荐信范文
2013/10/21 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
人事助理自荐信
2014/02/02 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
外国人来华邀请函
2015/01/31 职场文书
教师年度个人总结
2015/02/11 职场文书
公务员个人总结
2015/02/12 职场文书
大学生党课感想
2015/08/11 职场文书
2019年教师入党申请书
2019/06/27 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs