JS+Canvas绘制动态时钟效果


Posted in Javascript onNovember 10, 2017

本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <title></title> 
 <style> 
  #mycanvas{ 
  position: absolute; 
  left:50%; 
  margin-left:-250px; 
  border:5px solid #fff; 
  box-shadow: 0 0 10px rgba(0,0,0,0.2); 
  background-color: rgb(58, 179, 255); 
  } 
 </style> 
 </head> 
 <body> 
 <!-- 
  canvas:html5新增的画布对象,可以在其中绘制任何的图形,以及线条效果,包括图片 
  注意canvas的尺寸应该通过元素的属性直接设置,而不是使用样式实现(失帧) 
 --> 
 <canvas id="mycanvas" width="500px" height="500px">您的浏览器太low了,请切换</canvas> 
 <script> 
  //获取画布对象 
  var mycanvas = document.getElementById('mycanvas'); 
  //获取一个2d绘图环境(拿到一支画笔) 
  var ctx = mycanvas.getContext('2d'); 
  
 function draw(){ 
 
  //获取系统时间 
  var nowTime = new Date(); 
  var hours = nowTime.getHours();//获取时 
  var minutes = nowTime.getMinutes();//获取分 
  var seconds = nowTime.getSeconds();//获取秒 
  
  //防止小时超过12 
  hours = hours > 12 ? hours-12 : hours; 
  //精准设置小时值 
  hours = hours + minutes/60; 
 
  //清除画布(防止覆盖) 
  ctx.clearRect(0,0,500,500); 
 
  //初始化画笔的样式 
  ctx.lineWidth = 5; //设置线条的宽度 
  ctx.strokeStyle = '#fff'; //设置线条颜色 
  
  ctx.beginPath();//开始新的绘图路径 
  //设置一个圆形路径 
  ctx.arc(250,250,150,0,360,false); 
  //绘制图形 
  ctx.stroke(); 
  ctx.closePath();//结束当前绘图路径 
  
  //绘制刻度(时刻度) 
  for(var i = 0;i < 12;i++){ 
  ctx.beginPath(); 
  ctx.lineWidth = 10; 
  //保存当前绘图环境 
  ctx.save(); 
  //重置绘制起始位置(将圆心位置重置为0,0) 
  ctx.translate(250,250); 
  //旋转画布到一定的弧度 弧度=角度*PI/180 
  ctx.rotate(i * 30 * Math.PI / 180); 
  //设置绘制线条的起始位置 
  ctx.moveTo(0,140); 
  //设置线条的结束位置 
  ctx.lineTo(0,150); 
  //绘制路径 
  ctx.stroke(); 
  //还原初始的绘图环境 
  ctx.restore(); 
  ctx.closePath(); 
  } 
  
  //绘制刻度(分刻度) 
  for(var i = 0;i < 60;i++){ 
  ctx.beginPath(); 
  ctx.lineWidth = 3; 
  //保存当前绘图环境 
  ctx.save(); 
  //重置绘制起始位置(将圆心位置重置为0,0) 
  ctx.translate(250,250); 
  //旋转画布到一定的弧度 弧度=角度*PI/180 
  ctx.rotate(i * 6 * Math.PI / 180); 
  //设置绘制线条的起始位置 
  ctx.moveTo(0,142); 
  //设置线条的结束位置 
  ctx.lineTo(0,146); 
  //绘制路径 
  ctx.stroke(); 
  //还原初始的绘图环境 
  ctx.restore(); 
  ctx.closePath(); 
  } 
  
  /*绘制时针*/ 
  ctx.beginPath(); 
  ctx.lineWidth = 5; 
  //保存当前绘图环境 
  ctx.save(); 
  //重置绘制起始位置(将圆心位置重置为0,0) 
  ctx.translate(250,250); 
  //旋转画布到一定的弧度 弧度=角度*PI/180 
  ctx.rotate(hours * 30 * Math.PI / 180); 
  //设置绘制线条的起始位置 
  ctx.moveTo(0,10); 
  //设置线条的结束位置 
  ctx.lineTo(0,-100); 
  //绘制路径 
  ctx.stroke(); 
  //还原初始的绘图环境 
  ctx.restore(); 
  ctx.closePath(); 
  
  /*绘制分针*/ 
  ctx.beginPath(); 
  ctx.lineWidth = 3; 
  //保存当前绘图环境 
  ctx.save(); 
  //重置绘制起始位置(将圆心位置重置为0,0) 
  ctx.translate(250,250); 
  //旋转画布到一定的弧度 弧度=角度*PI/180 
  ctx.rotate(minutes * 6 * Math.PI / 180); 
  //设置绘制线条的起始位置 
  ctx.moveTo(0,10); 
  //设置线条的结束位置 
  ctx.lineTo(0,-120); 
  //绘制路径 
  ctx.stroke(); 
  //还原初始的绘图环境 
  ctx.restore(); 
  ctx.closePath(); 
  
  
  /*绘制秒针*/ 
  ctx.beginPath(); 
  ctx.lineWidth = 1; 
  ctx.strokeStyle = '#f00'; 
  //保存当前绘图环境 
  ctx.save(); 
  //重置绘制起始位置(将圆心位置重置为0,0) 
  ctx.translate(250,250); 
  //旋转画布到一定的弧度 弧度=角度*PI/180 
  ctx.rotate(seconds * 6 * Math.PI / 180); 
  //设置绘制线条的起始位置 
  ctx.moveTo(0,10); 
  //设置线条的结束位置 
  ctx.lineTo(0,-135); 
  //绘制路径 
  ctx.stroke(); 
  //还原初始的绘图环境 
  ctx.restore(); 
  ctx.closePath(); 
 } 
  
 setInterval(draw,1000); 
  
 </script> 
 </body> 
</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
javascript实现电脑和手机版样式切换
Nov 10 #Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 #jQuery
js定时器+简单的动画效果实例
Nov 10 #Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 #Javascript
angular之ng-template模板加载
Nov 09 #Javascript
深入理解Vue 单向数据流的原理
Nov 09 #Javascript
node.js基于express使用websocket的方法
Nov 09 #Javascript
You might like
php smarty的预保留变量总结
2008/12/04 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
Django 开发环境配置过程详解
2019/07/18 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python 防止死锁的方法
2020/07/29 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
安全教育培训制度
2015/08/06 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
MySQL的安装与配置详细教程
2021/06/26 MySQL