项目分为两个文件，clock.html和clock.js，下面贴出两个源代码
clock.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" charset="UTF-8" content="width=device-width,initial-scale=1">
<title>Clock</title>
<style type="text/css">
div{
text-align: center;
margin-top: 250px;
}
#clock{
border: 1px solid #ccc
}
</style>
</head>
<body>
<div>
<canvas id="clock" height="200px" width="200px"></canvas>
<script type="text/javascript" src="clock.js"></script>
</div>
</body>
</html>
clock.js
//设置全局变量
var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;//
var height = ctx.canvas.height;
var r = width / 2;
//绘制时钟的背景
function drawBackground(){
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.arc(0,0,r-5,0,2*Math.PI,false);//绘制一个圆形
ctx.lineWidth = 10;
ctx.stroke();
var hourNumbers = [3,4,5,6,6,8,9,10,11,12,1,2];//设置整点数字
ctx.font = '18px Arial';//设置整点数字的字体
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
hourNumbers.forEach(function(numbers,i){
//计算圆上时钟的坐标
var rad = 2*Math.PI / 12 *i;
var x = Math.cos(rad)*(r-30);
var y = Math.sin(rad)*(r-30);
ctx.fillText(numbers,x,y);
});
//设置小时的圆点
for(var i=0;i<60;i++){
var rad = 2*Math.PI / 60 *i;
var x = Math.cos(rad)*(r-18);
var y = Math.sin(rad)*(r-18);
ctx.beginPath();
//设置整点为深颜色，非整点为浅颜色，每5个循环一次
if(i % 5 == 0){
ctx.fillStyle = '#000';
ctx.arc(x,y,2,0,2*Math.PI,false);
}
else{
ctx.fillStyle = '#ccc';//填充的颜色
ctx.arc(x,y,2,0,2*Math.PI,false);
}
ctx.fill();
}
}
//利用canvas绘制出时针，其中save(),beginPath(),moveTo(),lineTo()都是canvas绘图工具有的函数，直接调用就可以了
//下面分针和秒针一样的，模仿即可
function drawHour(hour,minute){
ctx.save();//在当前时间内保存绘制出的时针
ctx.beginPath();
var rad = 2 * Math.PI / 12 *hour;//时针的弧度
var mrad = 2 * Math.PI / 12 / 60 * minute;//表示分针在走的时候时针多出来的弧度
ctx.rotate(rad+mrad);
ctx.lineWidth = '6';//时针的长度
ctx.lineCap='round';//绘制时针的头顶为方形
ctx.moveTo(0,10);
ctx.lineTo(0,-r / 2);
ctx.stroke();
ctx.restore();
}
//利用canvas绘制出分针
function drawMinute(minute){
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 60 * minute;
ctx.rotate(rad);
ctx.lineWidth = '3';
ctx.lineCap='round';
ctx.moveTo(0,10);
ctx.lineTo(0,-r + 30);
ctx.stroke();
ctx.restore();
}
//利用canvas绘制出秒针
function drawSecond(second){
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 60 * second;
ctx.fillStyle = '#ccc';
ctx.rotate(rad);
ctx.moveTo(-2,20);
ctx.lineTo(2,20);
ctx.lineTo(1,-r + 18);
ctx.lineTo(-1,-r + 18);
ctx.fill();
ctx.restore();
}
//画出中间的圆点
function drawDot(){
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0,0,3,0,2 * Math.PI,false);
ctx.fill();
}
function draw(){
ctx.clearRect(0,0,width,height);//清除前一个画出的时针，分针，秒针
var now = new Date();//新建一个对象获取当前时间
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
drawBackground();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();
}
setInterval(draw,1000);//每隔1s绘制一次图形
希望有更好方法的同学联系我哈！