<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>时钟制作</title>
<script>
onload = function () {
setInterval(oCarw, 1000);//间隔1秒画一次
}
function oCarw() {
//需求1. 跟系统时间一致
var oDate = new Date();//获取时间对象
var oHours = oDate.getHours();// 获取到时
var oMin = oDate.getMinutes();//获取到分
var oSec = oDate.getSeconds();//获取到秒
//换算成弧度
var oHoursValue = (-90 + oHours * 30) * Math.PI / 180;
var oMinValue = (-90 + oMin * 6) * Math.PI / 180;
var oSecValue = (-90 + oSec * 6) * Math.PI / 180;
var oc = document.getElementById("d1");
var ogc = oc.getContext("2d");
ogc.clearRect(0, 0, 200, 200);//清空画布
ogc.beginPath();
for (var i = 0; i < 60; i++) {
ogc.moveTo(200, 200);
//1.空心圆 圆心坐标 xy（200,200）2，150（半径）3,起点弧度 4，画了90度 5，false顺时针画 true逆时针画
ogc.arc(200, 200, 150, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
}
ogc.closePath();
ogc.stroke();
//画一个小于外圆的 白色的实心圆
ogc.beginPath();
ogc.moveTo(200, 200);
ogc.fillStyle = "#fff";
ogc.arc(200, 200, 150 * 19 / 20, 0, 360 * Math.PI / 180, false);
ogc.closePath();
ogc.fill();
//加粗刻度 12点 1点
ogc.beginPath();
ogc.lineWidth = 3;
for (var i = 0; i < 12; i++) {
ogc.moveTo(200, 200);
ogc.arc(200, 200, 150, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);
}
ogc.closePath();
ogc.stroke();
//白色的实心圆 覆盖
ogc.beginPath();
ogc.moveTo(200, 200);
ogc.fillStyle = "#fff";
ogc.arc(200, 200, 150 * 18 / 20, 0, 360 * Math.PI / 180, false);
ogc.closePath();
ogc.fill();
//画时针分针秒针
ogc.lineWidth = 5;
ogc.beginPath();
ogc.moveTo(200, 200);
ogc.arc(200, 200, 150 * 8 / 20, oHoursValue, oHoursValue, false);
ogc.closePath();
ogc.stroke();
//画分针
ogc.lineWidth = 3;
ogc.beginPath();
ogc.moveTo(200, 200);
ogc.arc(200, 200, 150 * 13 / 20, oMinValue, oMinValue, false);
ogc.closePath();
ogc.stroke();
//画秒针
ogc.lineWidth = 1;
ogc.beginPath();
ogc.moveTo(200, 200);
ogc.arc(200, 200, 150 * 17 / 20, oSecValue, oSecValue, false);
ogc.closePath();
ogc.stroke();
}
</script>
</head>
<body>
<canvas id="d1" width="400" height="400"></canvas>
</body>
</html>