<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
canvas{
display: block;
margin: auto;
border: 1px solid #CCC;
}
</style>
<title>钟表</title>
</head>
<body>
<canvas id="canvas" >您的浏览器不支持canvas</canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = 1000;
var height = 500;
var cx = width / 2; // 画布中心x
var cy = height / 2; // 画布中心y
var size = 200; // 表大小
canvas.width = width;
canvas.height = height;
draw();
setInterval(draw, 1000);
function draw(){
// 时间类
var date = new Date();
// 获取时
var hours = date.getHours();
// 获取分
var min = date.getMinutes();
// 获取秒
var sec = date.getSeconds();
// 外圈
drawOuter();
// 时间
drawText();
// 刻度
drawScale();
// 时针
drawHour(hours, min);
// 分针
drawMid(min, sec);
// 秒针
drawSec(sec);
}
// 画出表外圈
function drawOuter(){
// 最外圈
ctx.arc(cx, cy, size + 30, 0, Math.PI * 2);
ctx.fillStyle = "#000033";
ctx.fill();
ctx.beginPath();
// 内圈
ctx.arc(cx, cy, size, 0, Math.PI * 2);
ctx.fillStyle = "white";
ctx.fill();
ctx.beginPath();
// 中间原点
ctx.arc(cx, cy, 10, 0, Math.PI * 2);
ctx.fillStyle = "#000033";
ctx.fill();
ctx.beginPath();
}
// 画字
function drawText(){
var radian = 0, x = 0, y = 0;
var angle = -60; // 从1点开始画, 1点到2点之间的角度是30度
for(var i = 0 ; i < 12 ; i++){
radian = angle * Math.PI / 180;
x = Math.cos(radian) * (size - 50) + cx;
y = Math.sin(radian) * (size - 50) + cy;
ctx.textAlign = "center"; // 文字横向居中
ctx.textBaseline = "middle"; // 文字竖向居中
ctx.font = "45px Arial";
ctx.fillText(i + 1, x, y);
ctx.beginPath();
angle += 30;
}
}
// 画刻度
function drawScale(){
var radian = 0, x = 0, y = 0;
var s = 15;
var lineWidth = 0;
for(var angle = 0 ; angle <= 360 ; angle += 6){
radian = angle * Math.PI / 180;
// 画长刻度
if(angle % 30 == 0){
s = 20;
lineWidth = 3;
}
// 画短
else{
s = 15;
lineWidth = 1;
}
// 刻度起点是 size - s
x = Math.cos(radian) * (size - s) + cx;
y = Math.sin(radian) * (size - s) + cy;
ctx.moveTo(x, y);
// 刻度终点
for(var j = 0 ; j < s ; j++){
x += Math.cos(radian);
y += Math.sin(radian);
}
ctx.lineTo(x, y);
// 设置刻度宽度
ctx.lineWidth = lineWidth;
ctx.stroke();
ctx.beginPath();
}
}
// 画时针, hour 时间, min 分钟
function drawHour(hour, min){
// 小时 * 每小时之间的角度 - 90度(默认指向3点, 3*30=90) + (分钟已经走过了小时的百分之多少)
var angle = (hour * 30 - 90) + (30 * (min / 60));
// 角度转换为弧度, cos sin 的参数都是弧度
var radian = angle * Math.PI / 180;
// 长度
var s = 100;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(Math.cos(radian) * s + cx, Math.sin(radian) * s + cy);
ctx.lineWidth = 10;
ctx.stroke();
}
// 画分针
function drawMid(min, src){
// 0 默认在 3点的位置, 分钟与分钟的角度是6度, 要减去 15分钟 * 6度, 将分钟指向12点
// (6 * (src / 60)) = 秒已经走过了, 这分钟的百分比 * 6度
var angle = (min * 6 - 15 * 6) + (6 * (src / 60));
// 角度转换为弧度, cos sin 的参数都是弧度
var radian = angle * Math.PI / 180;
var s = 180; // 长度
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(Math.cos(radian) * s + cx, Math.sin(radian) * s + cy);
ctx.lineWidth = 5;
ctx.stroke();
}
// 画秒
function drawSec(src){
var angle = src * 6 - 15 * 6; // 0 默认在 3点的位置, 分钟与分钟的角度是6度, 要减去 15分钟 * 6度, 将分钟指向12点
var radian = angle * Math.PI / 180;
var s = 160; // 秒针1 长度
var s1 = 50; // 秒针2 长度
// 秒针
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(Math.cos(radian) * s + cx, Math.sin(radian) * s + cy);
ctx.lineWidth = 1;
ctx.stroke();
// 秒针红点
ctx.beginPath();
ctx.arc(Math.cos(radian) * s + cx, Math.sin(radian) * s + cy, 5, 0, Math.PI * 2);
ctx.fillStyle = "red";
ctx.fill();
// 反向(短)秒针
angle = (src * 6 - 15 * 6) + 180; // +180度, 于秒针相反
radian = angle * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(Math.cos(radian) * s1 + cx, Math.sin(radian) * s1 + cy);
ctx.lineWidth = 3;
ctx.stroke();
}
</script>
</html>