源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<canvas width="600" height="600" id="time-paint"></canvas>
</center>
<script>
var context = document.getElementById("time-paint").getContext("2d");
context.translate(300, 300); //原点设置
setInterval("draw()",1000);//隔1秒执行函数一次
function draw() {
//每次绘制图形之前 先清空画布所有的区域
context.clearRect(-300, -300, 600, 600);
var time = new Date();
var hour = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
var dateNum = time.getFullYear() + "年" +
(time.getMonth() > 9 ? time.getMonth() : "0" + time.getMonth()) + "月" +
(time.getDay() > 9 ? time.getDay() : "0" + time.getDay()) + "日";
var timeNum = (hour > 9 ? hour : "0" + hour) +
":" + (minutes > 9 ? minutes : "0" + minutes) + ":" + (seconds > 9 ? seconds : "0" + seconds);
//钟表边
context.beginPath();
context.arc(0, 0, 200, Math.PI * 0, Math.PI * 2);
context.strokeStyle = "#660000"
context.lineWidth = "10";
context.fillStyle = "rgba(100,150,185,0.2)";
context.stroke();
context.fill();
context.closePath();
//中心原点
context.beginPath();
context.arc(0, 0, 13, Math.PI * 0, Math.PI * 2);
context.fillStyle = "white";
context.fill();
context.closePath();
for(var i = 0; i < 60; i++) {
context.beginPath();
context.moveTo(0, -186);
context.lineTo(0, -192);
context.strokeStyle = "#BBBB00";
context.lineWidth = "3";
context.stroke();
context.closePath();
context.rotate(1 / 30 * Math.PI); //旋转坐标系
}
for(var i = 0; i < 12; i++) {
context.beginPath();
context.moveTo(0, -180);
context.lineTo(0, -192);
context.strokeStyle = "#AA7700";
context.lineWidth = "5";
context.stroke();
context.closePath();
context.rotate(1 / 6 * Math.PI); //旋转坐标系
}
//数字显示
context.beginPath();
context.font = "22px 'franklin gothic medium'";
context.strokeStyle = "black";
context.lineWidth = "1";
context.strokeText(dateNum, -85, 50);
context.strokeText(timeNum, -45, 80);
context.closePath();
//时针
var hours = hour >= 12 ? hour - 12 : hour;
context.beginPath();
context.rotate((hours + minutes / 60) * 30 / 180 * Math.PI);
context.moveTo(0, 30);
context.lineTo(0, -120);
context.strokeStyle = "#990000";
context.lineWidth = "8";
context.stroke();
context.closePath();
context.rotate(-(hours+minutes/60) * 30 / 180 * Math.PI);
//分针
context.rotate(minutes * 6 / 180 * Math.PI);
context.beginPath();
context.moveTo(0, 25);
context.lineTo(0, -150);
context.lineWidth = "5";
context.strokeStyle = "orange";
context.stroke();
context.closePath();
context.rotate(-minutes * 6 / 180 * Math.PI);
//绘制秒针
context.rotate(seconds * 6 / 180 * Math.PI);
context.beginPath();
context.moveTo(0, 30);
context.lineTo(0, -175);
context.lineWidth = '3';
context.strokeStyle = "red";
context.stroke();
context.closePath();
context.beginPath();
context.arc(0, -160, 5, Math.PI * 0, Math.PI * 2);
context.fillStyle = "red";
context.fill();
context.closePath();
context.rotate(-seconds * 6 / 180 * Math.PI);
//中心原点
context.beginPath();
context.arc(0, 0, 9, Math.PI * 0, Math.PI * 2);
context.fillStyle = "red";
context.fill();
context.closePath();
}
</script>
</body>
</html>
效果图