Comentario: Este artículo presenta principalmente el ejemplo gráfico de reloj HTML5 que puede moverse. Los amigos que lo necesitan pueden referirse a él.
Hacer relojes con HTML5
<! Doctype html>
<html>
<Evista>
<title> html5 reloj </title>
</ablo>
<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: reloj,
DrawCircle: function () {
var ctx = this.ctx;
ctx.strokestyle = "negro";
ctx.arc (this.canvas.width / 2, this.canvas.Height / 2, 50, 0, 2 * Math.pi, falso);
ctx.stroke ();
},
DrawNum: function () {
var ctx = this.ctx;
VAR ÁNGULO = MATH.PI * 2/12;
para (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 = esto;
Var Fecha, hora, minuto, segundo;
fecha = nueva fecha ();
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 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, falso);
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 ();
},
repintar: function () {
this.DrawPointer ();
this.DrawCircle ();
this.Drawnum ();
},
tik: function () {
var que = esto;
var ctx = this.ctx;
this.Repaint ();
window.timer = setInterval (function () {
ctx.ClearRect (0, 0, que.canvas.width, that.canvas.height);
eso.Repaint ();
}, 1000);
}
}; </p> <p> VAR opciones;
var clock = new Clock (document.getElementById ("Canvas"), opciones);
clock.tik ();
</script>
</body>
</html>
Después de guardar, ejecutarlo en un navegador, puede ver el reloj circular en movimiento. Por favor pruébalo