Comentário: Este artigo apresenta principalmente o exemplo gráfico de relógio HTML5 que pode se mover. Amigos que precisam podem se referir a ele.
Fazendo relógios com html5
<! Doctype html>
<html>
<head>
<title> html5 relógio </ititle>
</head>
<Body>
<Canvas id = "Canvas"> </lvas> </p> <p> <cript>
var relógio = função (tela, opções) {
this.Canvas = Canvas;
this.ctx = this.canvas.getContext ("2d");
this.options = opções;
}; </p> <p> relógio.prototype = {
Construtor: relógio,
drawcircle: function () {
var ctx = this.ctx;
ctx.strokestyle = "preto";
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 + ângulo * i) * 40, this.Canvas.Height / 2 + Math.sin (3 * Math.pi / 2 + ângulo * i) * 40);
}
},
drawPointer: function () {
var ctx = this.ctx;
var que = this;
Var data, hora, minuto, segundo;
date = new Date ();
hora = date.gethours ();
if (hora> 12) {
hora = hora % 12;
}
minuto = date.getminutes ();
segundo = date.getSeconds (); </p> <p> var b = minuto * math.pi / 30;
var c = segundo * math.pi / 30;
var a = hora * math.pi / 6 + math.pi / 6 * minuto / 60;
var minUteAngle = math.pi * 2 /3600;
Var Secondangle = Math.pi * 2 /60;
var Houstangle = 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 += hourrangle;
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 ();
},
Repintar: function () {
this.DrawPointer ();
this.Drawcircle ();
this.DDDAWNUM ();
},
tik: function () {
var que = 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 opções;
var clock = new Clock (document.getElementById ("Canvas"), opções);
relógio.tik ();
</script>
</body>
</html>
Depois de salvar, execute -o em um navegador, você pode ver o relógio circular em movimento. Por favor, tente