HTML5 Canvas画钟表
日期：2014-05-17 浏览次数：20797 次
HTML5 Canvas画时钟
?<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("clockCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 200, 200);
ctx.save();
ctx.translate(100, 100);
ctx.font = "Bold 14px Arial";
for (var i = 1; i <=60; i++) {
var angle = Math.PI / 30 * i;
var sin = Math.sin(angle);
var cos = Math.cos(angle);
if (i % 5 == 0) {
ctx.lineWidth = 4;
var sx = sin * 80;
var sy = cos * -80;
ctx.fillText(i/5, sin * 70-8, cos * -72+5);
} else {
ctx.lineWidth = 2;
var sx = sin * 90;
var sy = cos * -90;
}
var ex = sin * 100;
var ey = cos * -100;
ctx.beginPath();
ctx.moveTo(sx, sy);
ctx.lineTo(ex, ey);
ctx.stroke();
}
var currentDate = new Date();
var second = currentDate.getSeconds();
var hour = currentDate.getHours();
var minute = currentDate.getMinutes();
ctx.save();
ctx.rotate(Math.PI / 6 * (hour+minute/60+second/3600));
ctx.beginPath();
ctx.moveTo(0, 20);
ctx.lineTo(0, -55);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.rotate(Math.PI / 30 * (minute + second / 60));
ctx.beginPath();
ctx.moveTo(0, 20);
ctx.lineTo(0, -75);
ctx.stroke();
ctx.restore();
ctx.rotate(Math.PI / 30 * second);
ctx.strokeStyle = "#FF0000";
ctx.beginPath();
ctx.moveTo(0, 20);
ctx.lineTo(0, -90);
ctx.stroke();
ctx.restore();
setTimeout(draw, 1000)
}
</script>
</head>
<body onload="draw()">
<canvas id="clockCanvas" width="200" height="200" style="border:1px solid red"></canvas>
</body>
</html>
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
