会走动的图形html5时钟示例

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

会走动的图形html5时钟示例

来源：阅读：636 次日期：2016-06-23 09:28:12

温馨提示：小编为您整理了“会走动的图形html5时钟示例”,方便广大网友查阅！

使用html5制作时钟

代码如下:

<!doctype html>

<html>

<head>

</head>

<body>

var clock = function (canvas, options) {

this.canvas = canvas;

this.ctx = this.canvas.getcontext(2d);

this.options = options;

}; 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(); 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; 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);

}

}; var options;

var clock = new clock(document.getelementbyid(canvas), options);

clock.tik();

</script>

</body>

</html>

上一篇：css实现当鼠标移到input上时鼠标变为不可输入的状态

下一篇：dreamweaver做网页实例教程制作弹出菜单

手机网站地址：会走动的图形html5时钟示例

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！