Комментарий: Эта статья в основном представляет пример Graphic HTML5 Clock, который может двигаться. Друзья, которые это нужно, могут ссылаться на это.
Создание часов с HTML5
<! Doctype html>
<html>
<голова>
<Title> HTML5 Clock </title>
</head>
<тело>
<canvas id = "canvas"> </canvas> </p> <p> <cript>
var clock = function (canvas, options) {
this.canvas = canvas;
this.ctx = this.canvas.getContext ("2d");
this.options = options;
}; </p> <p> clock.prototype = {
конструктор: часы,
DrawCircle: function () {
var ctx = this.ctx;
ctx.strokestyle = "черный";
ctx.arc (this.canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * math.pi, false);
ctx.stroke ();
},
Draitnum: function () {
var ctx = this.ctx;
var angel = math.pi * 2/12;
для (var i = 1; i <= 12; i += 1) {
ctx.font = "20px Грузия";
ctx.textalign = "center";
ctx.textbaseline = 'middle';
ctx.filltext (string (i), this.canvas.width / 2 + math.cos (3 * math.pi / 2 + angel * i) * 40, this.canvas.height / 2 + math.sin (3 * math.pi / 2 + angel * i) * 40);
}
},
DrawPointer: function () {
var ctx = this.ctx;
var that = это;
var Дата, час, минута, вторая;
дата = новая дата ();
час = date.gethours ();
if (час> 12) {
час = час % 12;
}
minute = date.getminutes ();
second = date.getSeconds (); < / p> <p> var b = минута * math.pi / 30;
var c = второй * math.pi / 30;
var a = час * math.pi / 6 + math.pi / 6 * минута / 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 = это;
var ctx = this.ctx;
this.repaint ();
window.timer = setInterval (function () {
ctx.clearrect (0, 0, что.
that.repaint ();
}, 1000);
}
}; </p> <p> var options;
var clock = new Clock (document.getElementById ("Canvas"), Options);
clock.tik ();
</script>
</body>
</html>
После сохранения запустите его в браузере, вы можете увидеть движущиеся круглые часы. Пожалуйста, попробуйте