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 相关文章推荐
菜鸟javascript基础资料整理2
Dec 06 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
jquery默认校验规则整理
Mar 24 Javascript
javascript判断office版本示例
Apr 11 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
玩转python爬虫之cookie使用方法
2016/02/17 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
水利学院求职自荐书
2014/02/01 职场文书
高一学生期末评语
2014/04/25 职场文书
新郎结婚保证书
2015/02/26 职场文书
英语投诉信范文
2015/07/03 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python