index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style>
div{
text-align: center;
margin-top: 250px;
}
</style>
</head>
<body>
<div>
<canvas id="clock" width="400" height="400" style="border:1px solid #ccc;"></canvas>
</div>
<script src="./shizhong.js"></script>
</body>
</html>
shizhong.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;//定义半径
var rem=width /200;//定义钟的大小变化
//绘制外圆
function dranbackground(){
ctx.save();//保存当前环境状态
ctx.translate(r,r);//调动或移动
ctx.beginPath();//起始路径
ctx.lineWidth=10 *rem;//设置线条宽度
ctx.arc(0,0,r-ctx.lineWidth /2 ,0,2*Math.PI,false);//绘制弧形：X=0,Y=0,半径减去ctx.lineWidth/2宽度，起始路径，终点路径，为顺时针旋转
ctx.stroke();//绘制线条
// 绘制数字
var hours=[3,4,5,6,7,8,9,10,11,12,1,2];//12个小时
ctx.font=18 *rem+ 'px Arial';//字体属性
ctx.textAlign='center';//左右对齐
ctx.textBaseline='middle';//上下对齐
hours.forEach(function(number,i){
var rad=2*Math.PI/12*i;//每一个小时数的弧度*i
var x=Math.cos(rad)*(r-30 *rem);
var y=Math.sin(rad)*(r-30 *rem);
ctx.fillText(number,x,y);//在画布上绘制被填充的文本（文本，X轴，Y轴）
});
//绘制妙钟点
for(var i=0;i<60;i++){
var rad=2*Math.PI/60*i;//每一个妙数的弧度*i
var x=Math.cos(rad)*(r-18*rem);
var y=Math.sin(rad)*(r-18*rem);
ctx.beginPath();//起始点
//这条IF涵数是如果每隔5个小时的填充为黑色，否则为灰色
if(i%5===0){
ctx.fillStyle='#000';
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
} else{
ctx.fillStyle='#ccc';
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}
ctx.fill();//绘制填充
}
}
//绘制时针
function dranhour(hour,minute){
ctx.save();//保存当前环境状态
ctx.beginPath();//起点
var rad=2*Math.PI/12*hour;//弧度为圆圈/60秒*时针1点
var mrad=2*Math.PI/12/60*minute;//弧度为圆圈/60秒*分针30分
ctx.rotate(rad+mrad);//旋转为时针弧度+分针弧度
ctx.lineWidth=6*rem;//线条宽度为6
ctx.lineCap='round';//线条变圆
ctx.moveTo(0,10);//从X为0到Y为10
ctx.lineTo(0,-r/2);//画到X为0到Y为-R/2长度
ctx.stroke();//绘制线条
ctx.restore();//返回之前保存过的路径状态和属性
}
//绘制分针
function dranminute(minute){
ctx.save();//保存当前环境状态
ctx.beginPath();//起点
var rad=2*Math.PI/60*minute;//弧度为圆圈/60秒*分针30分
ctx.rotate(rad);//旋转为分针弧度
ctx.lineWidth=3*rem;//线条宽度为3
ctx.lineCap='round';//线条变圆
ctx.moveTo(0,10*rem);//从X为0到Y为10
ctx.lineTo(0,-r+30*rem);//画到X为0到Y为-R+30长度
ctx.stroke();//绘制线条
ctx.restore();//返回之前保存过的路径状态和属性
}
//绘制妙针
function dransecond(second){
ctx.save();//保存当前环境状态
ctx.beginPath();//起点
ctx.fillStyle='red';//填充为红色
var rad=2*Math.PI/60*second;//弧度为圆圈/60秒*秒针15秒
ctx.rotate(rad);//旋转秒针弧度
ctx.moveTo(-2*rem,20*rem);//从X为-2到Y为20
ctx.lineTo(2*rem,20*rem);//画到X为2到Y为20长度
ctx.lineTo(1,-r+18*rem);//画到X为1到Y为-R+18长度
ctx.lineTo(-1,-r+18*rem);//画到X为-1到Y为-R+18长度
ctx.fill();//绘制填充
ctx.restore();//返回之前保存过的路径状态和属性
}
//绘制时针、分针、妙针中的白色圆点
function drandot(){
ctx.beginPath();//起点
ctx.fillStyle='#fff';//填充为白色
ctx.arc(0,0,3*rem,0,2*Math.PI,false);//X轴为0，Y轴为0，半径为3，起点为0，终点为2*Math.PI（圆圈），为顺时针
ctx.fill();//绘制填充
}
function dran(){
ctx.clearRect(0,0,width,height);//清空指定图形像素
var now=new Date();//获取当前时间
var hour=now.getHours();//执行当前时针
var minute=now.getMinutes();//执行当前分针
var second=now.getSeconds();//执行当前秒针
dranbackground();//变量外圆值
dranhour(hour,minute);//变量时针值
dranminute(minute);//变量分针值
dransecond(second);//变量妙针值
drandot();//变量中心圆点值
ctx.restore();//返回之前保存过的路径状态和属性
}
dran();//先执行一次
setInterval(dran,1000)//每秒执行一次