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下申明对象的几种方法小结
Oct 02 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
JS实现横向轮播图(初级版)
Jun 24 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
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Python实现二维有序数组查找的方法
2016/04/27 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python字符串Intern机制详解
2019/07/01 Python
Python 去除字符串中指定字符串
2020/03/05 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
大学同学聚会邀请函
2014/01/29 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书