<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#clock{
background: aqua;
}
</style>
</head>
<body>
<canvas id="clock" width="500" height="500"></canvas>
<script src="main.js"></script>
</body>
</html>
/**
* Created by Administrator on 2016/10/14.
*/
(function () { var clock = document.querySelector("#clock");
var con = clock.getContext("2d"); //清理画布
function clearCanvas() {
con.clearRect(0, 0, 500, 500);
} // 绘制表盘
function drawClockDial() {
con.save();
con.beginPath();
con.fillStyle = "coral";
con.arc(250, 250, 200, 0, 2 * Math.PI);
con.fill();
var grad = con.createLinearGradient(0, 0, 0, 140);
grad.addColorStop(1, 'rgb(192, 80, 77)');
grad.addColorStop(0.5, 'rgb(155, 187, 89)');
grad.addColorStop(0, 'rgb(128, 100, 162)');
con.lineWidth = 6;
con.strokeStyle = grad;
con.stroke();
con.closePath();
con.restore(); for (var i = 0; i < 12; i++) { var x = 180 * Math.sin(i * 30 * Math.PI / 180);
var y = 180 * -Math.cos(i * 30 * Math.PI / 180);
con.save();
con.translate(240, 270);
con.font = "50px 宋体";
con.fillText(i.toString(), x, y);
con.restore(); }
} //绘制针
function drawHand() {
clearCanvas();
drawClockDial(); var time = new Date();
var hour = parseInt(time.getHours());
var min = parseInt(time.getMinutes());
var sec = parseInt(time.getSeconds()); //时针
con.save();
con.lineWidth = 5;
con.strokeStyle = "green";
con.translate(250, 250);
con.rotate((hour * 30 + min / 60) * Math.PI / 180);
con.beginPath();
con.moveTo(0, -100);
con.lineTo(0, 0);
con.lineCap = "round";
con.stroke();
con.closePath();
con.restore(); // 分针
con.save();
con.lineWidth = 5;
con.strokeStyle = "blue";
con.translate(250, 250);
con.rotate((min * 6 + sec / 60) * Math.PI / 180);
con.beginPath();
con.moveTo(0, -130);
con.lineTo(0, 0);
con.lineCap = "round";
con.stroke();
con.closePath();
con.restore(); //秒针
con.save();
con.lineWidth = 5;
con.strokeStyle = "red";
con.translate(250, 250);
con.rotate(sec * 6 * Math.PI / 180);
con.beginPath();
con.moveTo(0, -150);
con.lineTo(0, 0);
con.lineCap = "round";
con.stroke();
con.closePath();
con.restore(); //表心
con.save();
con.beginPath();
con.arc(250, 250, 5, 0, 2 * Math.PI);
con.closePath();
con.lineWidth = 3;
con.stroke();
con.restore(); requestAnimationFrame(drawHand);
} function init() {
drawHand();
} init();
})();
效果图：