| 标题 | 会走动的图形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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。