欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

会走动的图形html5时钟示例

程序员文章站 2023-12-05 16:07:52
这篇文章主要介绍了会走动的图形html5时钟示例,需要的朋友可以参考下... 14-04-27...

使用html5制作时钟

会走动的图形html5时钟示例


复制代码
代码如下:

<!doctype html>
<html>
<head>
<title>html5时钟</title>
</head>
<body>
<canvas id = "canvas"></canvas></p> <p> <script>
var clock = function (canvas, options) {
this.canvas = canvas;
this.ctx = this.canvas.getcontext("2d");
this.options = options;
};</p> <p> clock.prototype = {
constructor: clock,
drawcircle: function () {
var ctx = this.ctx;
ctx.strokestyle = "black";
ctx.arc(this.canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * math.pi, false);
ctx.stroke();
},
drawnum: function () {
var ctx = this.ctx;
var angle = math.pi * 2 / 12;
for (var i = 1; i <= 12; i += 1) {
ctx.font = "20px georgia";
ctx.textalign = "center";
ctx.textbaseline = 'middle';
ctx.filltext(string(i), this.canvas.width / 2 + math.cos(3 *math.pi / 2 + angle * i) * 40, this.canvas.height / 2 + math.sin(3 * math.pi / 2 + angle * i) * 40);
}
},
drawpointer: function () {
var ctx = this.ctx;
var that = this;
var date, hour, minute, second;
date = new date();
hour = date.gethours();
if (hour > 12) {
hour = hour % 12;
}
minute = date.getminutes();
second = date.getseconds();</p> <p> var b = minute * math.pi / 30;
var c = second * math.pi / 30;
var a = hour * math.pi / 6 + math.pi / 6 * minute / 60;
var minuteangle = math.pi * 2 / 3600;
var secondangle = math.pi * 2 / 60;
var hourangle = math.pi * 2 / 12 / 3600;</p> <p> ctx.beginpath();
ctx.save();
ctx.translate(that.canvas.width / 2, that.canvas.height / 2);
ctx.arc(0, 0, 3, 0, 2 * math.pi, false);
ctx.fill();
ctx.closepath();
ctx.beginpath();
a += hourangle;
ctx.rotate(a);
ctx.fillrect(-2, -22, 4, 30);
ctx.closepath();
ctx.beginpath();
b += minuteangle;
ctx.rotate(b - a);
ctx.fillrect(-1.5, -26, 3, 35);
ctx.closepath();
ctx.beginpath();
c += secondangle;
ctx.rotate(c - b);
ctx.fillrect(-1, -30, 2, 40);
ctx.closepath();
ctx.restore();
},
repaint: function () {
this.drawpointer();
this.drawcircle();
this.drawnum();
},
tik: function () {
var that = this;
var ctx = this.ctx;
this.repaint();
window.timer = setinterval(function () {
ctx.clearrect(0, 0, that.canvas.width, that.canvas.height);
that.repaint();
}, 1000);
}
};</p> <p> var options;
var clock = new clock(document.getelementbyid("canvas"), options);
clock.tik();
</script>
</body>
</html>


保存后使用浏览器运行,可以看到走动的圆形时钟,大家试试看吧