首页
所有分类
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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
支持移动端原生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) keeplive_timeout(1) 缓存机制(1) text-shadow(1) http_stub_status_module(1) RTMP(1) zabbix(9) BufferPool(1) 逻辑函数(1) location(2)
You might like
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
JavaScript Date对象应用实例分享
2017/10/30 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
python实现的登录和操作开心网脚本分享
2014/07/09 Python
python django model联合主键的例子
2019/08/06 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
CSS3,线性渐变（linear-gradient）的使用总结
2017/01/09 HTML / CSS
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
花园仓库建筑：Garden Buildings Direct
2018/02/16 全球购物
荷兰在线钓鱼商店：Raven
2019/06/26 全球购物
意大利单身交友网站：Meetic
2020/07/12 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
高考学习决心书
2015/02/04 职场文书
工作时间证明
2015/06/15 职场文书
诚信考试主题班会
2015/08/17 职场文书
Python之matplotlib绘制饼图
2022/04/13 Python