<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>时钟</title>
</head>
<body>
<canvas id="clock" width="500" height="500" style="background-color:white;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("clock");
var ccc = canvas.getContext("2d");
//绘制扇形
ccc.sector = function (x, y, radius, sDeg, eDeg) {
this.save();
this.translate(x, y);
this.beginPath();
this.arc(0, 0, radius, sDeg, eDeg);
this.save();
this.rotate(eDeg);
this.moveTo(radius, 0);
this.lineTo(0, 0);
this.restore();
this.rotate(sDeg);
this.lineTo(radius, 0);
this.closePath();
this.restore();
return this;
}
//绘制表盘
function drawClock() {
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
var year = now.getFullYear();
var month = now.getMonth();
var date = now.getDate();
var day = now.getDay();
hour > 12 ? hour - 12 : hour;
hour += (min / 60);
ccc.clearRect(0, 0, canvas.width, canvas.height);
ccc.fillStyle = "Black";
ccc.beginPath();
ccc.sector(250, 250, 200, Math.PI / 2 * 3, 0);
ccc.fill();
ccc.closePath();
ccc.fillStyle = "Black";
ccc.beginPath();
ccc.sector(250, 250, 200, Math.PI * 0.5, Math.PI)
ccc.fill();
ccc.closePath();
//画表盘大圆
ccc.strokeStyle = "#Black";
ccc.lineWidth = 10;
ccc.beginPath();
ccc.arc(250, 250, 200, 0, 360);
ccc.stroke();
ccc.closePath();
//小时刻度
for (var i = 0; i < 12; i++) {
ccc.save();
ccc.lineWidth = 7;
ccc.strokeStyle = "Black";
ccc.translate(250, 250);
ccc.rotate(30 * i * Math.PI / 180);
ccc.beginPath();
ccc.moveTo(0, -175);
ccc.lineTo(0, -195);
ccc.stroke();
ccc.closePath();
ccc.restore();
}
//分钟刻度
for (var i = 0; i < 16; i++) {
ccc.save();
ccc.lineWidth = 5;
ccc.strokeStyle = "White";
ccc.translate(250, 250);
ccc.rotate(i * 6 * Math.PI / 180);
ccc.beginPath();
ccc.moveTo(0, -185);
ccc.lineTo(0, -195);
ccc.stroke();
ccc.closePath();
ccc.restore();
}
for (var i = 16; i < 30; i++) {
ccc.save();
ccc.lineWidth = 5;
ccc.strokeStyle = "Black";
ccc.translate(250, 250);
ccc.rotate(i * 6 * Math.PI / 180);
ccc.beginPath();
ccc.moveTo(0, -185);
ccc.lineTo(0, -195);
ccc.stroke();
ccc.closePath();
ccc.restore();
}
for (var i = 30; i < 46; i++) {
ccc.save();
ccc.lineWidth = 5;
ccc.strokeStyle = "White";
ccc.translate(250, 250);
ccc.rotate(i * 6 * Math.PI / 180);
ccc.beginPath();
ccc.moveTo(0, -185);
ccc.lineTo(0, -195);
ccc.stroke();
ccc.closePath();
ccc.restore();
}
for (var i = 46; i < 60; i++) {
ccc.save();
ccc.lineWidth = 5;
ccc.strokeStyle = "Black";
ccc.translate(250, 250);
ccc.rotate(i * 6 * Math.PI / 180);
ccc.beginPath();
ccc.moveTo(0, -185);
ccc.lineTo(0, -195);
ccc.stroke();
ccc.closePath();
ccc.restore();
}
//时针转动
ccc.save();
ccc.lineWidth = 7;
ccc.strokeStyle = "Grey";
ccc.translate(250, 250);
ccc.rotate(hour * 30 * Math.PI / 180);
ccc.beginPath();
ccc.moveTo(0, -130);
ccc.lineTo(0, 10);
ccc.stroke();
ccc.closePath();
ccc.restore();
//分针转动
ccc.save();
ccc.lineWidth = 5;
ccc.strokeStyle = "Grey";
ccc.translate(250, 250);
ccc.rotate(min * 6 * Math.PI / 180);
ccc.beginPath();
ccc.moveTo(0, -150);
ccc.lineTo(0, 10);
ccc.stroke();
ccc.closePath();
ccc.restore();
//秒针转动
ccc.save();
ccc.lineWidth = 3;
ccc.strokeStyle = "Grey";
ccc.translate(250, 250);
ccc.rotate(sec * 6 * Math.PI / 180);
ccc.beginPath();
ccc.moveTo(0, -170);
ccc.lineTo(0, 10);
ccc.stroke();
ccc.closePath();
//表盘圆心
ccc.beginPath();
ccc.arc(0, 0, 7, 0, 360);
ccc.fillStyle = "Black";
ccc.fill();
ccc.strokeStyle = "Black";
ccc.stroke();
ccc.closePath();
//秒针圆
ccc.beginPath();
ccc.fillStyle = "Grey";
//ccc.strokeStyle = "Grey";
ccc.arc(0, -140, 7, 0, 360);
ccc.fill();
// ccc.stroke();
ccc.closePath();
ccc.restore();
//显示时间、日期
ccc.lineWidth = 2;
year = now.getFullYear();
month = now.getMonth() + 1;
if (month < 10) month = "0" + month;
date = now.getDate();
if (date < 10) date = "0" + date;
day = now.getDay();
if (day == 0) day = "星期天";
if (day == 1) day = "星期一";
if (day == 2) day = "星期二";
if (day == 3) day = "星期三";
if (day == 4) day = "星期四";
if (day == 5) day = "星期五";
if (day == 6) day = "星期六";
hour = now.getHours();
if (hour < 10) hour = "0" + hour;
min = now.getMinutes();
if (min < 10) min = "0" + min;
sec = now.getSeconds();
if (sec < 10) sec = "0" + sec;
var str = hour + ":" + min + ":" + sec;
var str2 = year + "-" + month + "-" + date;
var str3 = day;
ccc.font = "20px Buxton Sketch";
ccc.lineWidth = 1;
ccc.fillStyle = "White";
ccc.fillText(str, 170, 320);
ccc.fillText(str2, 160, 370);
ccc.font = "40px Bauhaus 93";
ccc.lineWidth = 3;
ccc.fillStyle = "Black";
ccc.fillText("6", 255, 420);
ccc.fillText("12", 205, 110);
ccc.fillStyle = "White";
ccc.fillText("3", 400, 240);
ccc.fillText("9", 80, 280);
ccc.font = "20px 华文行楷";
ccc.lineWidth = 1;
ccc.fillText(str3, 250, 190);
}
drawClock();
setInterval(drawClock, 1000);
</script>
</body>
</html>