您的位置：首页 > Web前端 > HTML5

html5 canvas 时钟实例

2012-02-08 20:06 483 查看

从网上找了一段时钟实例的小程序，然后我把它移到jQueryMobile代码结构中，先看下效果：

再看下代码：

<!DOCTYPE html>
<html>
<head>
<title>html5 clock</title>
<meta content="text/html; charset=UTF-8">
</head>

<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");

var slen = 60;
var mlen = 48;
var hlen = 35;

cxt.strokeRect(0, 0, c.width, c.height);

cxt.beginPath();
cxt.arc(200, 150, 100, 0, 2 * Math.PI, true);
cxt.stroke();
cxt.closePath();

cxt.beginPath();
cxt.translate(200, 150);
cxt.rotate(-Math.PI / 2);
cxt.save();

for (var i = 0; i < 60; i++) {
if (i % 5 == 0) {
cxt.fillRect(84, -3, 16, 6);
cxt.fillText("" + (i / 5 == 0 ? 12 : (i / 5>9?i/5:"0"+i/5)), 70, 3);
} else {
cxt.fillRect(90, -1, 10, 2);
}
cxt.rotate(Math.PI / 30);
}
cxt.closePath();

var s = 0, m = 0, h = 0;

function Refresh() {
cxt.restore();
cxt.save();
cxt.rotate(s * Math.PI / 30);
cxt.clearRect(-13, -2, slen+2, 4);
cxt.restore();
cxt.save();

cxt.rotate((m+s/60) * Math.PI / 30);
cxt.clearRect(-11, -2, slen+2, 4);
cxt.restore();
cxt.save();

cxt.rotate((h+m/60) * Math.PI / 6);
cxt.clearRect(-9, -3, slen+2, 5);
cxt.restore();
cxt.save();

var time = new Date();
s =time.getSeconds();
m =time.getMinutes();
h =time.getHours();

cxt.rotate((h+m/60) * Math.PI / 6);
cxt.fillRect(-8, -2, hlen, 4);
cxt.restore();
cxt.save();

cxt.rotate((m+s/60) * Math.PI / 30);
cxt.fillRect(-10, -1.5, mlen, 3);
cxt.restore();
cxt.save();

cxt.rotate(s * Math.PI / 30);
cxt.fillStyle='#2e2';
cxt.fillRect(-12, -1, slen, 2);
}

var MyInterval = setInterval("Refresh();", 1000);
</script>
</body>
</html>

显示结果，如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航