Graphic html5 clock example _ html5 tutorial tips-

This article mainly introduces the graphic html5 clock examples that will move around. For more information, see use HTML5 to create a clock.

The Code is as follows:

Html5 clock

Script
Var Clock = function (canvas, options ){
This. canvas = canvas;
This. ctx = this. canvas. getContext ("2d ");
This. options = options;
};

Clock. prototype = {
Constructor: Clock,
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/12;
For (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 + 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 date, hour, minute, second;
Date = new Date ();
Hour = date. getHours ();
If (hour> 12 ){
Hour = hour % 12;
}
Minute = date. getMinutes ();
Second = date. getSeconds ();

Var B = minute * Math. PI/30;
Var c = second * Math. PI/30;
Var a = hour * 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;

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 ();
Ctx. fillRect (-2,-22, 4, 30 );
Ctx. closePath ();
Ctx. beginPath ();
B + = minuteAngle;
Ctx. rotate (B-);
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 (function (){
Ctx. clearRect (0, 0, that. canvas. width, that. canvas. height );
That. rePaint ();
},1000 );
}
};

Var options;
Var clock = new Clock (document. getElementById ("canvas"), options );
Clock. tik ();
Script

Save it and run it in the browser. You can see the circular clock. Let's try it.