整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
近看到头条里有几篇用HTML5绘制时钟的文章，感觉这个真的很简单，于是自己花了两个小时写了一个，仅供大家相互探讨。
首先我们分析需求，在没有任何图片的情况下，我们必须要绘制地盘，刻度，时针，分针以及秒针，并且每秒绘制一次秒针，时
针，分针的刻度也同意是有规律可循的，例如时针是分针走360度后时针走30度，也就是12：1的比例，秒针走360度，分针走6度，也就是60：1的角度比例，以此我们可以计算任意时刻的时，分，秒的角度值。每秒总的角度比为，时针：分针：秒针=1：12：720。需求分析结束后，便可以开始着手绘制我们的表盘了。
首先创建一个canvas.html文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas时钟Demo</title>
</head>
<body>
<canvas id="canvas" width="600px" height="600px" style="background-color: #F0F8FF; position:absolute;left: 100px;">该浏览器不支持canvas</canvas>
<script type="text/javascript" src="js/canvas.js" ></script>
</body>
</html>
canvas.html
接下来在js文件夹中创建一个canvas.js文件
创建canvas.js文件
并将所有的逻辑写到这个js文件中。
首先定义所有的常量，如图所示：
绘制中所有使用到的常量
var canvas=null;
var context=null;
var RADIUS=200; //半径
var POINTX=300; //原点X
var POINTY=300; //原点Y
var HOURHANDLEN=100; //时针长度
var MINUTESHANDLEN=140; //分针长度
var SECONDHANDLEN=180; //秒针长度
var HOURHANDWIDTH=5; //时针宽度
var MINUTESHANDWIDTH=3; //分针宽度
var SECONDHANDWIDTH=1; //秒针宽度
var HOURHANDCOLOR='#FF00FF'; //时针颜色
var MINUTESHANDCOLOR='#CC10FF'; //分针颜色
var SECONDHANDCOLOR='#1155BB'; //秒针颜色
创建一个初始化的方法function init(){}，用来初始化canvas和context的内容，如果着这里对于context这个中文翻译为上下文的东西还不懂的话可以自行查阅相关文档（最基础的了，不懂就别接下看了，看了也白瞎）。
init()初始化方法
为何是canvas.getContext("2d")，因为API提供的就是如果绘制2D图片的上下文就是传递这个2d去取得这个对象。
接下来绘制表盘和刻度，我们分析一下，因为刻度都是有规律的，每五条就有一条是整点的刻度，所以我们用5来取余来绘制不同样式的刻度。
/** 绘制钟表圆盘 */
function drawCircle(){
context.beginPath();
context.strokeStyle="black"
context.lineWidth=4;
context.arc(POINTX, POINTY, RADIUS, 0, Math.PI*2);
context.closePath();
context.stroke();
context.beginPath();
context.fillStyle="black";
context.arc(POINTX, POINTY, 4, 0, Math.PI * 2);
context.closePath();
context.fill();
}
绘制刻度内容如下
/** 绘制钟表的时间刻度
*/
function drawLine(){
var startP={x : 0, y: 0};
var endP={x : 0, y : 0};
var numP={x : 0, y : 0};
var fillColor="red";
var len=10;
var num=null;
for(var i=0;i < 60; i ++){
if(i % 5==0){
fillColor="red";
len=10;
num=12 - Math.floor(i/5);
numP.x=POINTX - 4 - (RADIUS - 20) * Math.sin(i * Math.PI/30);//4为微调数字位置
numP.y=POINTX + 4 - (RADIUS - 20) * Math.cos(i * Math.PI/30);//4为微调数字位置
}
else{
fillColor="black";
len=5;
num=null;
}
startP.x=POINTX - RADIUS * Math.sin(i * Math.PI/30);
startP.y=POINTX - RADIUS * Math.cos(i * Math.PI/30);
endP.x=POINTX - (RADIUS - len) * Math.sin(i * Math.PI/30);
endP.y=POINTX - (RADIUS - len) * Math.cos(i * Math.PI/30);
drawLineCore(startP, endP, fillColor, num, numP);
}
}
/**
* 根据提供的起始点绘制表盘刻度
* @param {Object} startP
* @param {Object} endP
* @param {Object} fillColor
*/
function drawLineCore(startP, endP, fillColor, num, numP){
context.beginPath();
context.lineWidth=2;
context.strokeStyle=fillColor;
context.moveTo(startP.x, startP.y);
context.lineTo(endP.x, endP.y);
context.stroke();
context.closePath();
if(num !==null){
context.beginPath();
context.lineWidth=1;
context.strokeStyle=fillColor;
context.strokeText(num + "", numP.x, numP.y);
context.stroke();
context.closePath();
}
}
绘制完表盘和刻度后，我们开始绘制时分秒针了，根据我们刚刚分析的角度比例关系，我们写如下代码：
function drawHands(){
setInterval(function(){
context.clearRect(0,0,500,500);
drawLine();
drawCircle();
drawHandByData(3);
drawHandByData(2);
drawHandByData(1);
},1000)
}
/**
* 根据类型和指针的数字来绘制图形，统一换算成秒数来计算角度
* @param {Object} type 1为时针，2为分针，3为秒针
*/
function drawHandByData(type){
var date=new Date();
var curHour=date.getHours();
var curMinutes=date.getMinutes();
var curSecond=date.getSeconds();
var angle=0;
var handLen=0;
var allSecond=0;
var handWidth=0;
var handColor="";
if(type==1){
var hour=curHour >=12 ? curHour - 12 : curHour;
allSecond=hour * 3600 + curMinutes * 60 + curSecond;
angle=(Math.PI/6) * (allSecond / 3600);
handLen=HOURHANDLEN;
handWidth=HOURHANDWIDTH;
handColor=HOURHANDCOLOR;
}
else if(type==2){
handLen=MINUTESHANDLEN;
allSecond=curMinutes * 60 + curSecond;
angle=(Math.PI / 30) * (allSecond / 60)
handWidth=MINUTESHANDWIDTH;
handColor=MINUTESHANDCOLOR;
}
else if(type==3){
handLen=SECONDHANDLEN;
allSecond=curSecond;
angle=(Math.PI / 30) * allSecond;
allSecond=curSecond;
handWidth=SECONDHANDWIDTH;
handColor=SECONDHANDCOLOR;
}
drawHand(Math.PI - angle, handLen, handWidth, handColor);
}
/**
* 绘制时针，分针，秒针统一方法
* @param {Object} angle 时针，分针，秒针的角度
* @param {Object} handLen 时针，分针，秒针的长度
* @param {Object} handWidth 时针，分针，秒针的宽度
* @param {Object} handColor 时针，分针，秒针的宽度
*/
function drawHand(angle, handLen, handWidth, handColor){
var endP={x:0, y:0}
endP.x=POINTX + Math.sin(angle) * handLen;
endP.y=POINTY + Math.cos(angle) * handLen;
context.beginPath();
context.lineWidth=handWidth;
context.strokeStyle=handColor;
context.moveTo(POINTX, POINTY);
context.lineTo(endP.x, endP.y);
context.stroke();
context.closePath();
}
最后别忘了调用各个函数：
init();
drawLine();
drawCircle();
drawHands();
整个JS文件我是用的是闭包写法，如：
(function(win){
function init(){}
drawLine(){}
drawCircle(){}
drawHands(){}
//最后调用
init();
drawCircle();
drawLine();
drawHands();
})(window)
希望大家喜欢我的分享，如果可以请点赞，多多留言。谢谢
用canvas做的一个时钟，先看效果
绘制时钟圆盘，其实就是绘制一个圆，这个比较简单，代码如下：
标绘刻度的难点在于确定刻度点的位置，这需要用到一些的几何知识，圆弧和三角函数。
如上图，要求圆上任意一点A的位置，通过三角函数可以推出：
x1=BC=cos(a)*AC
y1=BC=sin(a)*AC
其中AC就是半径，是已知的
现在我们要来确定角a的度数：
小时刻度：12个刻度，每一小时的角度为：360/12，弧度为：2π/12
分钟刻度：60个刻度，每一分钟的角度为：360/60，弧度为：2π/60
有了半径和角度我们就可以算出坐标，这样就可以绘制刻度了。注意js里面用的是弧度。
为了方便，我们用ctx.translate()把画布原点重定向到了圆心，这改变了画布的状态，为了不影响后续的绘制，每次绘完之后都要把画布恢复为原来的状态，具体操作就是：重定向画布原点之前，用ctx.save()保存画布状态，绘制完成之后，用ctx.restore()恢复之前保存的画布状态。
//保存画布当前环境状态 ctx.save(); //重定向画布原点 ctx.translate(250,250); //绘制代码...... //恢复之前保存的状态 ctx.restore();
绘制小时刻度代码
同理，绘制分钟刻度就简单，把12换成60就可以了。
绘制分钟刻度代码
时针、分针、秒针都是和当前时间有关，所以先要获取当前时间的小时数、分钟数、秒数。
//得到当前时间 var now=new Date(); //当前小时数 var hour=now.getHours(); //当前分钟数 var minute=now.getMinutes(); //当前秒数 var second=now.getSeconds(); hour=hour+minute/60;
画时针时，我们先画出指向12点的时针：
//指向12点的时针 ctx.beginPath(); ctx.lineWidth=8; ctx.lineCap="round"; ctx.moveTo(0,10); ctx.lineTo(0,-120); ctx.stroke()
之后每一个时刻度点的时针就是把指向12点的时针旋转一定的度数：
//旋转度数 ctx.rotate(hour*2*Math.PI/12);
绘制时针代码
同理，时针绘制好之后，分针和秒针也就简单，直接看代码。
绘制分针代码
绘制秒针代码
为了好看我们再画一个中心点。
绘制中心点代码
最后，为了让时钟实时转动，需要加一个定时任务，每秒执行一次。
//一秒钟执行一次 setInterval(clock,1000);
还要注意，每次重绘都要清除画布：
ctx.clearRect(0,0,canvas.width,canvas.height);
最终完整的代码逻辑如下：
这样一个时钟就完成了，如果想看更详细的操作，推荐观看视频版。
款基于HTML5和CSS3的圆盘时钟动画，它的特点是圆盘时钟侧边带有实时更新的数字时钟，而且时钟在走动时还会发出滴答滴答的声音。
效果图
JavaScript代码：
页面布局：
css样式：
*请认真填写需求信息，我们会在24小时内与您取得联系。
