ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำตัวอย่างนาฬิกากราฟิก HTML5 ที่สามารถย้ายได้ เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
ทำนาฬิกาด้วย HTML5
<! doctype html>
<html>
<head>
<title> นาฬิกา HTML5 </title>
</head>
<body>
<canvas id = "canvas"> </anvas> </p> <p> <prict>
var clock = function (canvas, ตัวเลือก) {
this.canvas = canvas;
this.ctx = this.canvas.getContext ("2d");
this.options = ตัวเลือก;
}; </p> <p> clock.prototype = {
ตัวสร้าง: นาฬิกา
Drawcircle: function () {
var ctx = this.ctx;
ctx.strokestyle = "ดำ";
ctx.arc (this.canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * math.pi, เท็จ);
ctx.stroke ();
-
Drawnum: function () {
var ctx = this.ctx;
var angle = math.pi * 2 /12;
สำหรับ (var i = 1; i <= 12; i += 1) {
ctx.font = "20px georgia";
ctx.textalign = "center";
ctx.textbaseline = 'กลาง';
ctx.filltext (สตริง (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, ชั่วโมง, นาที, วินาที;
วันที่ = วันที่ใหม่ ();
ชั่วโมง = วันที่ getHours ();
ถ้า (ชั่วโมง> 12) {
ชั่วโมง = ชั่วโมง % 12;
-
minute = date.getMinutes ();
second = date.getSeconds (); </p> <p> var b = นาที * math.pi / 30;
var c = วินาที * math.pi / 30;
var a = ชั่วโมง * math.pi / 6 + math.pi / 6 * นาที / 60;
var minuteAngle = math.pi * 2 /3600;
var secondangle = math.pi * 2 /60;
var hourangle = math.pi * 2/12/6600; </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, เท็จ);
ctx.fill ();
ctx.closepath ();
ctx.beginpath ();
a += ชั่วโมง;
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 that = this;
var ctx = this.ctx;
this.repaint ();
window.timer = setInterval (ฟังก์ชัน () {
ctx.clearrect (0, 0, that.canvas.width, that.canvas.height);
That.repaint ();
}, 1,000);
-
}; </p> <p> ตัวเลือก var;
var clock = นาฬิกาใหม่ (document.getElementById ("Canvas"), ตัวเลือก);
clock.tik ();
</script>
</body>
</html>
หลังจากบันทึกแล้วเรียกใช้ในเบราว์เซอร์คุณสามารถเห็นนาฬิกาวงกลมที่เคลื่อนไหวได้ โปรดลอง