Komentar: Artikel ini terutama memperkenalkan contoh jam html5 grafis yang dapat bergerak. Teman yang membutuhkannya bisa merujuknya.
Membuat jam dengan html5
<! Doctype html>
<Html>
<head>
<title> jam html5 </iteme>
</head>
<body>
<Canvas ID = "Canvas"> </ Canvas> </p> <p> <script>
var jam = fungsi (kanvas, opsi) {
this.canvas = kanvas;
this.ctx = this.canvas.getContext ("2d");
this.options = opsi;
}; </p> <p> clock.prototype = {
Konstruktor: jam,
Drawcircle: function () {
var ctx = this.ctx;
ctx.strokestyle = "hitam";
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 sudut = math.pi * 2/12;
untuk (var i = 1; i <= 12; i += 1) {
ctx.font = "20px georgia";
ctx.textAlign = "center";
ctx.textBaseline = 'tengah';
ctx.filltext (string (i), this.canvas.width / 2 + math.cos (3 * math.pi / 2 + sudut * i) * 40, this.canvas.height / 2 + math.sin (3 * math.pi / 2 + angle * i) * 40);
}
},
drawpointer: function () {
var ctx = this.ctx;
var itu = ini;
Tanggal Var, jam, menit, kedua;
tanggal = tanggal baru ();
jam = date.getHours ();
if (jam> 12) {
jam = jam % 12;
}
menit = date.getMinutes ();
kedua = date.getSeconds (); </p> <p> var b = menit * math.pi / 30;
var c = kedua * math.pi / 30;
var a = jam * math.pi / 6 + math.pi / 6 * menit / 60;
var minuteanjle = math.pi * 2/600;
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 ();
},
mengecat ulang: function () {
this.drawpointer ();
this.drawcircle ();
this.drawnum ();
},
Tik: function () {
var itu = ini;
var ctx = this.ctx;
this.repaint ();
window.timer = setInterval (function () {
ctx.clearrect (0, 0, that.canvas.width, that.canvas.height);
itu.repaint ();
}, 1000);
}
}; </p> <p> Opsi var;
var jam = jam baru (document.getElementById ("canvas"), opsi);
clock.tik ();
</script>
</body>
</html>
Setelah menabung, jalankan di browser, Anda dapat melihat jam melingkar yang bergerak. Tolong coba