<!DOCTYPE html>
<html>
<head>
<title>Canvas 之 时钟 Demo</title>
<!--简单 样式模版-->
<style type="text/css">
*
{
margin: 0;
padding: 0;
font-family: YaHei Consolas Hybrid,宋体;
font-size: 14px;
list-style: none;
}
.wrapper
{
margin: 50px auto;
width: 400px;
padding: 10px;
border: solid 1px gray;
background-color: #eee;
overflow:auto;
}/*H1浅蓝阴刻字*/
body
{
background-color: gray;
}
h1
{
text-align: center;
display: block;
background-color: #C4DEF7;
color: #344251;
font: normal 30px "微软雅黑";
text-shadow: 1px 1px 0px #DEF3FF;
padding: 5px 0px;
margin:10px;
box-shadow: 0px 2px 6px #000;
border-radius:10px;
}
input[type='button'],input[type='submit'] { padding:2px 5px;} #clockMap { background-color:White;}
</style>
</head>
<body>
<h1>
Canvas 之 时钟 Demo
</h1>
<div class="wrapper">
<canvas width="400" height="400" id="clockMap"></canvas>
<script type="text/javascript">
//获取画面DOM对象
var canvas = document.getElementById("clockMap");
//获取2D画布的上下文
var map = canvas.getContext("2d"); //格式化时间格式为00:00:00来显示
var formatTime = function (time) {
return time < 10 ? "0" + time : time;
} //注意：在画时分秒的针时，一定要先保存环境，画完再回到环境中，不能一次画三针
var drawClock = function () {
//清屏
map.clearRect(0, 0, 400, 400);
//保存当前环境
map.save(); //绘制表盘
map.beginPath();
map.lineWidth = 10;
map.storkeStyle = "black";
map.arc(200, 200, 150, 0, 360, true);
map.stroke();
map.closePath(); //绘制刻度
map.translate(200, 200);
for (var i = 0; i < 60; i++) {
if (i % 5 == 0) {
map.beginPath();
map.lineWidth = 4;
map.strokeStyle = "red";
map.moveTo(135, 0);
map.lineTo(143, 0);
map.stroke();
map.closePath();
}
else {
map.beginPath();
map.lineWidth = 2;
map.strokeStyle = "black";
map.moveTo(140, 0);
map.lineTo(143, 0);
map.stroke();
map.closePath();
}
map.rotate(6 * Math.PI / 180);
} //绘制数字
map.textAlign = "center";
map.textBaseline = "middle";
map.font = "bold 30px Arial";
map.fillText("3", 115, 0);
map.fillText("6", 0, 115);
map.fillText("9", -115, 0);
map.fillText("12", 0, -115); //========绘制时针，分针，秒针========
//获取当前时间
var date = new Date();
var hours = date.getHours();
var minute = date.getMinutes();
var seconds = date.getSeconds();
hours = hours > 12 ? hours - 12 : hours;
var hour = hours + minute / 60; //绘制时针
map.save();
map.beginPath();
map.rotate((hour * 30 - 90) * Math.PI / 180);
map.lineWidth = 6;
map.moveTo(-10, 0);
map.lineTo(90, 0);
map.closePath();
map.stroke();
map.restore(); //绘制分针
map.save();
map.beginPath();
map.rotate((minute * 6 - 90) * Math.PI / 180);
map.lineWidth = 4;
map.moveTo(-10, 0);
map.lineTo(132, 0);
map.closePath();
map.stroke();
map.restore(); //绘制秒针
map.save();
map.beginPath();
map.rotate((seconds * 6 - 90) * Math.PI / 180);
map.lineWidth = 2;
map.strokeStyle = "red";
map.moveTo(-10, 0);
map.lineTo(138, 0);
map.closePath();
map.stroke();
map.restore(); //中心点
map.save();
map.beginPath();
map.arc(0, 0, 4, 0, 360, true);
map.closePath();
map.lineWidth = 2;
map.strokeStyle = "red";
map.fill();
map.stroke();
map.restore(); //时间显示
map.save();
map.font = "24px Arial";
map.fillText("当前时间："+formatTime(hours) + ":" + formatTime(minute) + ":" + formatTime(seconds), -1, -180);
map.restore(); //将画好的时钟显示在之前保存的环境中
map.restore();
} //加载时，执行一次，避免刷新时，有一秒的延迟
drawClock(); //开启定时器
window.setInterval(drawClock, 1000);
</script>
</div>
</body>
</html>
效果图：
