التعليق: يقدم هذا المقال بشكل أساسي مثال ساعة HTML5 الرسومية التي يمكن أن تتحرك. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
صنع الساعات مع HTML5
<! doctype html>
<html>
<head>
<title> html5 Clock </title>
</head>
<body>
<canvas id = "canvas"> </canvas> </p> <p> <script>
var clock = function (Canvas ، Options) {
this.canvas = قماش ؛
this.ctx = this.canvas.getContext ("2d") ؛
this.options = الخيارات ؛
} ؛ </p> <p> clock.prototype = {
مُنشئ: الساعة ،
DrawCircle: function () {
var ctx = this.ctx ؛
ctx.strokestyle = "Black" ؛
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/21 ؛
لـ (var i = 1 ؛ i <= 12 ؛ i += 1) {
ctx.font = "20px Georgia" ؛
ctx.textalign = "center" ؛
ctx.textbaseline = 'middle' ؛
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 = هذا ؛
تاريخ var ، ساعة ، دقيقة ، ثانية ؛
التاريخ = تاريخ جديد () ؛
ساعة = date.gethours () ؛
إذا (الساعة> 12) {
ساعة = ساعة ٪ 12 ؛
}
دقيقة = date.getMinutes () ؛
الثاني = Date.getSeconds () ؛ </p> <p> var b = minute * math.pi / 30 ؛
var c = second * 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 hournangle = 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 += Hournangle ؛
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 () ؛
} ،
إعادة التوصيل: وظيفة () {
this.drawpointer () ؛
this.drawcircle () ؛
this.drawnum () ؛
} ،
Tik: Function () {
var that = هذا ؛
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 Options ؛
var clock = clock new (document.getElementById ("canvas") ، الخيارات) ؛
clock.tik () ؛
</script>
</body>
</html>
بعد الادخار ، قم بتشغيله في متصفح ، يمكنك رؤية الساعة الدائرية المتحركة. من فضلك جربها