Commentaire: Cet article présente principalement l'exemple graphique de l'horloge HTML5 qui peut se déplacer. Les amis qui en ont besoin peuvent y faire référence.
Faire des horloges avec HTML5
<! Doctype html>
<html>
<adal>
<Title> HTML5 Clock </Title>
</ head>
<body>
<canvas id = "canvas"> </ canvas> </p> <p> <cript>
var horloge = fonction (toile, options) {
this.canvas = canvas;
this.ctx = this.canvas.getContext ("2d");
this.options = options;
}; </p> <p> horloge.prototype = {
Constructeur: horloge,
drawCircle: function () {
var ctx = this.ctx;
ctx.strokestyle = "noir";
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;
pour (var i = 1; i <= 12; i + = 1) {
ctx.font = "20px Georgia";
ctx.textalign = "Centre";
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, heure, minute, deuxième;
date = new Date ();
heure = date.Gethours ();
if (heure> 12) {
heure = heure% 12;
}
minute = date.getMinutes ();
deuxième = date.getSeconds (); </p> <p> var b = minute * math.pi / 30;
var c = seconde * 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 ();
},
repeindre: 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 horloge = new horloge (document.getElementById ("canvas"), options);
Clock.tik ();
</cript>
</docy>
</html>
Après enregistrer, exécutez-le dans un navigateur, vous pouvez voir l'horloge circulaire mobile. Veuillez l'essayer