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 相关文章推荐
splice slice区别
Oct 09 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
JS实现li标签的删除
Apr 12 Javascript
javascript Number 与 Math对象的介绍
Nov 17 Javascript
vue3不同环境下实现配置代理
May 25 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 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
javascript 跳转代码集合
2009/12/03 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python的re模块正则表达式操作
2016/05/25 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
详解Python中where()函数的用法
2018/03/27 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
python实现视频压缩功能
2020/12/18 Python
英国精品买手店:Browns Fashion
2016/09/29 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
二手房买卖协议书
2014/04/10 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
服务承诺书格式
2014/05/21 职场文书
2014年民警工作总结
2014/11/25 职场文书
先进个人材料怎么写
2014/12/30 职场文书
七年级生物教学反思
2016/02/20 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis