<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 canvas超逼真的模拟时钟特效效果演示</title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("canvas");
var cobj = canvas.getContext("2d");
var centerX = 200;
var centerY = 200;
var radius = 150;
function initClock() {
cobj.clearRect(0, 0, canvas.width, canvas.height);
var datetime = new Date();
var hh = datetime.getHours();
var mm = datetime.getMinutes();
var ss = datetime.getSeconds();
//hh
var hhDu = hh * (360 / 12) - 90 + ((mm / 60) * 30);
var xH = ((radius - 65) * Math.cos(Math.PI / 180 * hhDu)) + centerX;
var yH = ((radius - 65) * Math.sin(Math.PI / 180 * hhDu)) + centerY;
drawLine(centerX, centerY, xH, yH, "#222222", 10);
//mm
var mmDu = mm * (360 / 60) - 90;
var xM = ((radius - 35) * Math.cos(Math.PI / 180 * mmDu)) + centerX;
var yM = ((radius - 35) * Math.sin(Math.PI / 180 * mmDu)) + centerY;
drawLine(centerX, centerY, xM, yM, "#222222", 6);
//ss
var ssDu = ss * (360 / 60) - 90;
var xS = ((radius - 20) * Math.cos(Math.PI / 180 * ssDu)) + centerX;
var yS = ((radius - 20) * Math.sin(Math.PI / 180 * ssDu)) + centerY;
drawLine(centerX, centerY, xS, yS, "#F3A829", 2);
for (var i = 0; i < 12; i++) {
var begX = (radius * Math.cos(Math.PI / 180 * (30 * i))) + centerX;
var begY = (radius * Math.sin(Math.PI / 180 * (30 * i))) + centerY;
var endX = ((radius - 10) * Math.cos(Math.PI / 180 * (30 * i))) + centerX;
var endY = ((radius - 10) * Math.sin(Math.PI / 180 * (30 * i))) + centerY;
drawLine(begX, begY, endX, endY, "#000", 5);
var x = ((radius - 30) * Math.cos(Math.PI / 180 * (30 * i))) + centerX;
var y = ((radius - 30) * Math.sin(Math.PI / 180 * (30 * i))) + centerY;
var h = i + 3;
h = (h % 12);
if (h == 0) h = 12;
x -= 5; y += 5;
drawFont(x, y, h);
}
for (var i = 0; i < 60; i++) {
var begX = (radius * Math.cos(Math.PI / 180 * (6 * i))) + centerX;
var begY = (radius * Math.sin(Math.PI / 180 * (6 * i))) + centerY;
var endX = ((radius - 5) * Math.cos(Math.PI / 180 * (6 * i))) + centerX;
var endY = ((radius - 5) * Math.sin(Math.PI / 180 * (6 * i))) + centerY;
drawLine(begX, begY, endX, endY, "#000", 2);
}
cobj.fillStyle = "#F3A829";
cobj.lineWidth = 0;
cobj.arc(centerX, centerY, 10, 0, 360, false);
cobj.fill();
function drawLine(begX, begY, endX, endY, color, width) {
cobj.beginPath();
cobj.strokeStyle = color;
cobj.lineWidth = width;
cobj.lineCap = "round";
cobj.moveTo(begX, begY);
cobj.lineTo(endX, endY);
cobj.stroke();
cobj.closePath();
}
function drawFont(x, y, text) {
cobj.font = '20px helvetica';
cobj.fillText(text, x, y);
}
}
setInterval(initClock, 1000);
};
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400">
您的浏览器不支持
</canvas>
</body>
</html>
