Kommentar: In diesem Artikel wird hauptsächlich das grafische HTML5 -Clock -Beispiel vorgestellt, das sich bewegen kann. Freunde, die es brauchen, können sich darauf beziehen.
Uhren mit HTML5 machen
<! DocType html>
<html>
<kopf>
<title> html5 Uhr </title>
</head>
<body>
<canvas id = "canvas"> </canvas> </p> <p> <Script>
var Clock = Funktion (Canvas, Optionen) {
this.canvas = canvas;
this.ctx = this.canvas.getContext ("2D");
this.options = Optionen;
}; </p> <p> clock.prototype = {{
Konstruktor: Uhr,
DrawCircle: function () {
var ctx = this.ctx;
ctx.strokestyle = "schwarz";
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;
für (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 + Winkel * i) * 40, this.canvas.height / 2 + Math.sin (3 * Math.pi / 2 + Winkel * i) * 40);
}
},
DrawPointer: function () {
var ctx = this.ctx;
var das = dies;
var Datum, Stunde, Minute, Sekunde;
Datum = neues Datum ();
Hour = Datum.Gethours ();
if (stunde> 12) {
Stunde = Stunde % 12;
}
minute = date.getminutes ();
Second = Datum.getSeconds (); < / p> <p> var b = minhe * math.pi / 30;
var c = zweite * math.pi / 30;
var a = stunde * 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 das = dies;
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 -Optionen;
var clock = new Clock (Dokument.GetElementById ("Canvas"), Optionen);
clock.tik ();
</script>
</body>
</html>
Führen Sie nach dem Speichern in einem Browser die sich bewegende kreisförmige Uhr aus. Bitte versuchen Sie es