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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
javascript版2048小游戏
2015/03/18 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python logging模块的使用详解
2020/10/23 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
应届大专毕业生自我鉴定
2014/04/08 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
python文件目录操作之os模块
2021/05/08 Python
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Redis Cluster 集群搭建你会吗
2021/08/04 Redis