一、效果图
二、源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
background-color: #bbffaa;
}
#canvas{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: pink;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload=function(){
var canvas = document.getElementById("canvas");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
}
move();
setInterval(move,1000);
function move(){
//每次都清除画布
ctx.clearRect(0,0,canvas.width,canvas.height);
//添加外层save()和restore()方法，是为了处理最初的旋转以及平移
ctx.save();
ctx.lineCap="round";
ctx.lineWidth=8;
//将圆点移动到中心位置
ctx.translate(200,200);
//逆时针旋转90度坐标系
ctx.rotate(-90*Math.PI/180);
//绘制外圆表盘
ctx.save();
ctx.strokeStyle="#325fa2";
ctx.lineWidth=14;
//开始绘制路径
ctx.beginPath();
ctx.arc(0,0,140,0,2*Math.PI);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.lineWidth=8;
//绘制刻度
//绘制时针刻度
for(var i=0; i< 12; i++){
//rotate有叠加的作用，顺时针旋转
ctx.rotate(30*Math.PI/180);
//每次都清除上一次的路径容器
ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.restore();
//绘制分针刻度
ctx.save();
ctx.lineWidth=4;
for(var i=0;i<60;i++){
//i=0时绘制，但是坐标系被旋转6度；i=1时绘制，此时坐标系已经旋转了6度，时针刻度的地方将不会被绘制
if(i%5!=0){
ctx.beginPath();
ctx.moveTo(117,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.rotate(6*Math.PI/180);
}
ctx.restore();
var date = new Date();
var sec = date.getSeconds();
var min = date.getMinutes() + sec / 60;
var hour = date.getHours() + min / 60;
hour = hour > 12 ? hour-12 : hour;
//绘制时针
ctx.save();
ctx.lineWidth=14;
ctx.rotate(hour*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
//绘制分针
ctx.save();
ctx.lineWidth=10;
ctx.rotate(min*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(-28,0);
ctx.lineTo(84,0);
ctx.stroke();
ctx.restore();
//绘制秒针
ctx.save();
ctx.lineWidth=6;
ctx.strokeStyle="#D40000"
ctx.rotate(sec*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(-30,0);
ctx.lineTo(83,0);
ctx.stroke();
ctx.lineWidth=4;
ctx.beginPath();
ctx.arc(96,0,10,0,2*Math.PI);
ctx.stroke();
ctx.restore();
//绘制中心圆点
ctx.save();
ctx.fillStyle="deeppink";
ctx.beginPath();
ctx.arc(0,0,10,0,2*Math.PI);
ctx.fill();
ctx.restore();
ctx.restore();
}
};
</script>
</body>
</html>