HTML5动态时钟
HTML5动态时钟
效果图
这里无法实时显示当前时间，可以看我这篇博客。
原理
先打上html5中的canvas标签，它定义了一块画布，可以用javascript在上前面做动态效果。
调用浏览器内置对象window的setInterval（animate，delay）方法，可以实现每隔delay时间调用一次自定义的animate方法，从而达到动态的效果。代码实现
```javascript
<body>
<canvas id="mycanvas" width="500" height="500" style="background: #B0D141"></canvas>
<script>
var mycanvas = document.getElementById("mycanvas");
var context = mycanvas.getContext("2d");
function drawClock() {
//每次调用函数都要对指定区域清屏
context.clearRect(0, 0, 500, 500);
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
hour = (hour >= 12) ? hour - 12 : hour;
hour = hour + min / 60;
min = min + sec / 60;
//画圆
context.lineWidth=10;
context.strokeStyle='#000';
context.beginPath();
context.arc(250, 250, 200, 0, 360, false);
context.closePath();
context.stroke();
//画时刻度
for (var i = 0; i < 12; i++) {
context.save();
context.strokeStyle='black';
context.beginPath();
context.translate(250, 250);
context.rotate(i * 30 * Math.PI / 180);
context.beginPath();
context.moveTo(0, -190);
context.lineTo(0, -170);
context.closePath();
context.stroke();
context.restore();
}
//画分刻度
context.beginPath();
for (var i = 0; i < 60; i++) {
context.save();
context.strokeStyle='black';
context.beginPath();
context.translate(250, 250);
context.rotate(i * 6 * Math.PI / 180);
context.moveTo(0, -190);
context.lineTo(0, -180);
context.closePath();
context.stroke();
context.restore();
}
//画时针
context.save();
context.lineWidth=12;
context.beginPath();
context.translate(250, 250);
context.rotate(hour * Math.PI * 30 / 180);
context.moveTo(0, -135);
context.lineTo(0, 10);
context.closePath();
context.stroke();
context.restore();
//画分针
context.save();
context.lineWidth=8;
context.beginPath();
context.translate(250, 250);
context.rotate(min * Math.PI * 6 / 180);
context.moveTo(0, -160);
context.lineTo(0, 10);
context.closePath();
context.stroke();
context.restore();
//画秒针
context.save();
context.lineWidth=5;
context.strokeStyle='red';
context.beginPath();
context.translate(250, 250);
context.rotate(sec * Math.PI * 6 / 180);
context.moveTo(0, -182);
context.lineTo(0, 16);
context.closePath();
context.stroke();
context.restore();
}
setInterval(drawClock, 1000);
</script>
<body/>“`
后记
没想到markdown还能支持javascript。这样以后可以通过类似的方法在blog中用js做动态效果了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015年04月20日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录