<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>canvas画时钟</title>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
canvas.width = canvas.height = 400;
canvas.style.background = "white";
if (canvas.getContext) {
var ext = canvas.getContext("2d");
drawClock()
setInterval(drawClock, 1000);
}
function drawClock() {
var x = 200;
var y = 200;
var r = 150;
ext.clearRect(0, 0, canvas.width, canvas.height)
var oData = new Date();
var hours = oData.getHours();
var minutes = oData.getMinutes();
var seconds = oData.getSeconds();
var hoursValue = (-90 + hours * 30 + minutes / 2) * Math.PI / 180; //分针过了30，时针不应该正好在整点上，2分钟一度；
var minutesValue = (-90 + minutes * 6) * Math.PI / 180;
var secondsValue = (-90 + seconds * 6) * Math.PI / 180;
ext.lineWidth = 2
ext.arc(x, y, r, 0, Math.PI * 2, false);
ext.stroke();
//画小刻度
for (var i = 0; i < 60; i++) {
ext.strokeStyle = "black"
ext.lineWidth = 1;
ext.beginPath();
ext.moveTo(x, y);
ext.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false)
ext.closePath();
ext.stroke();
}
drawBlankCircle(10)
//画大刻度
for (var i = 0; i < 12; i++) {
ext.lineWidth = 3;
ext.strokeStyle = "green"
ext.beginPath();
ext.moveTo(x, y);
ext.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false)
ext.closePath();
ext.stroke();
}
drawBlankCircle(15)
//画空白覆盖圆;
function drawBlankCircle(d) {
ext.fillStyle = "white"
ext.beginPath();
ext.arc(x, y, r - d, 0, Math.PI * 2, false);
ext.closePath();
ext.fill();
}
//画时针;
ext.lineWidth = 5;
ext.strokeStyle = "#f90"
ext.beginPath();
ext.moveTo(x, y);
ext.arc(x, y, r - 60, hoursValue, hoursValue, false);
ext.closePath();
ext.stroke();
//画分针;
ext.lineWidth = 3;
ext.strokeStyle = "red"
ext.beginPath();
ext.moveTo(x, y);
ext.arc(x, y, r - 40, minutesValue, minutesValue, false);
ext.closePath();
ext.stroke();
//画秒针;
ext.lineWidth = 1;
ext.strokeStyle = "black"
ext.beginPath();
ext.moveTo(x, y);
ext.arc(x, y, r - 25, secondsValue, secondsValue, false);
ext.closePath();
ext.stroke();
//画表盘中心小圆;
ext.fillStyle = "black";
ext.beginPath();
ext.arc(x, y, 6, 0, Math.PI * 2, false);
ext.closePath();
ext.fill();
}
}
</script>
</head>
<body >
<canvas id="canvas">
</canvas>
</body>
</html>
