JS+H5 Canvas实现时钟效果
更新时间：2018年07月20日 10:04:14 作者：RataYou
这篇文章主要为大家详细介绍了JS+H5 Canvas实现时钟效果，利用JavaScript和Canvas实现简单时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用JavaScript+Canvas来实现最简单的时钟效果，供大家参考，具体内容如下
效果图：
先看html代码：
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/demo3.js" ></script> </head> <body> <canvas id = "canvas"></canvas> </body> </html>
JavaScript代码：
var canvas,context;
function draw(){//定义划时钟的方法
var data = new Date();
var hHoure = data.getHours();
var mMin = data.getMinutes();
var sSec = data.getSeconds();
var hValue = (hHoure*30+mMin/2-90)*Math.PI/180;
var mValue = (mMin*6-90)*Math.PI/180;
var sValue = (sSec*6 -90)*Math.PI/180;
var x = 200,y = 200,r = 150;
context.clearRect(0,0,canvas.width,canvas.height);
context.moveTo(x,y);
context.arc(x,y,r,0,6*Math.PI/180,false);
//
context.beginPath();
context.lineWidth = 1;
for(var i = 0;i<60;i++){
context.moveTo(x,y);
context.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
context.closePath();
context.stroke();
//
context.beginPath();
context.fillStyle = "white";
context.moveTo(x,y);
context.arc(x,y,r/1.1,-0,2*Math.PI,false);
context.closePath();
context.fill();
//
context.beginPath();
context.lineWidth = 3;
for(var i = 0;i<12;i++){
context.moveTo(x,y);
context.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI,false);
}
context.closePath();
context.stroke();
//
context.beginPath();
context.fillStyle = "white";
context.moveTo(x,y);
context.arc(x,y,r/1.12,0,2*Math.PI,false);
context.closePath();
context.fill();
context.beginPath();
context.fillStyle = "black";
context.moveTo(x,y);
context.arc(x,y,r/30,0,2*Math.PI,false);
context.fill();
//
context.beginPath();
context.lineWidth = 5;
context.moveTo(x,y);
context.arc(x,y,r/2.5,hValue,hValue,false);
context.stroke();
//
context.beginPath();
context.lineWidth = 3;
context.moveTo(x,y);
context.arc(x,y,r/2,mValue,mValue,false);
context.stroke();
//
context.beginPath();
context.lineWidth = 2;
context.moveTo(x,y);
context.arc(x,y,r/1.6,sValue,sValue,false);
context.stroke();
}
window.onload = function(){
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas.height = 500;
canvas.width = 500;
setInterval(draw,1000);
draw();
}
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS实现的随机排序功能算法,结合具体实例形式分析了javascript常用的排序算法实现技巧,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了JS对象复制(深拷贝和浅拷贝)，并附有详细代码，感兴趣的小伙伴们，可以参考下2021-04-04
最近心血来潮，用JavaScript实现了Windows自带的扫雷游戏。当前只实现了基本功能，还有一个缺点就是只能在IE上正常运行，估计是事件没有处理好。2009-05-05![JavaScript中的稀疏数组与密集数组[译]](//img.jbzj.com/images/xgimg/bcimg3.png)
一般来说,JavaScript中的数组是稀疏的,也就是说,数组中的元素之间可以有空隙,因为一个数组其实就是一个键值映射.本文解释了如何创建稀疏数组和不稀疏的数组2012-09-09
JavaScript Array对象扩展indexOf()方法
JavaScript中Array对象没有indexOf()方法，可通过下面的代码扩展,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了JavaScript常用验证函数,实例汇总了如字符串验证、表单验证及js常用特效等诸多js常用验证函数及相关技巧,非常具有实用价值,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了JavaScript暂停和继续定时器的方法的相关资料,非常不错，需要的朋友可以参考下2016-07-07
用于节点操作的API，颠覆原生操作HTML DOM节点的API
敏捷开发是一种以人为核心、迭代、循序渐进的开发方法。在敏捷开发中，软件项目的构建被切分成多个子项目，各个子项目的成果都经过测试，具备集成和可运行的特征。2010-12-12
文件上传功能在各大网站经常会用到，今天小编通过本文给大家介绍了WEB前端实现裁剪上传图片功能的相关资料,需要的朋友可以参考下2016-10-10
考试页面可以实现隐藏左边的考生信息部分，学了javascript后也能实现这个功能了，下面是实现思路、代码及解效果截图，喜欢的朋友们可以看看2014-10-10
![JavaScript中的稀疏数组与密集数组[译]](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论