利用HTML5的Canvas绘制时钟
2016-06-23 本文已影响145人
清枫_小天
http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="Canvas" width="800" height="800"></canvas>
<script type="text/javascript">
window.onload = draw;
function draw() {
var canvas = document.getElementById("Canvas");
var context = canvas.getContext("2d");
context.save();
context.translate(200, 200);
var deg = 2 * Math.PI / 12;
//表盘
context.save();
context.beginPath();
context.arc(0, 0, 150, 0, 2 * Math.PI, false);
context.fillStyle = "blue";
context.fill();
context.closePath();
context.restore();
//数字
context.save();
context.beginPath();
for (var i = 1; i < 13; i++) {
var x1 = Math.sin(i * deg);
var y1 = -Math.cos(i * deg);
context.fillStyle = "#fff";
context.font = "bold 20px Calibri";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(i, x1 * 120, y1 * 120);
}
context.closePath();
context.restore();
//new Date
var time = new Date();
var h = (time.getHours() % 12) * 2 * Math.PI / 12;
var m = time.getMinutes() * 2 * Math.PI / 60;
var s = time.getSeconds() * 2 * Math.PI / 60;
//时针
context.save();
context.rotate(h + m / 12 + s / 720);
context.beginPath();
context.moveTo(0, 6);
context.lineTo(0, -85);
context.strokeStyle = "#fff";
context.lineWidth = 6;
context.stroke();
context.closePath();
context.restore();
//分针
context.save();
context.rotate(m + s / 60);
context.beginPath();
context.moveTo(0, 8);
context.lineTo(0, -105);
context.strokeStyle = "#fff";
context.lineWidth = 4;
context.stroke();
context.closePath();
context.restore();
//秒针
context.save();
context.rotate(s);
context.beginPath();
context.moveTo(0, 10);
context.lineTo(0, -120);
context.strokeStyle = "#fff";
context.lineWidth = 2;
context.stroke();
context.closePath();
context.restore();
context.restore();
setTimeout(draw, 1000);
}
</script>
</body>
</html>
下载 (1).jpg
