Use html5 canvas to share the clock code instance, html5canvas

Use html5 canvas to share the clock code instance, html5canvas
This article mainly introduces how to use html5 canvas to draw Clock Code instances. For more information, see

HTML5 is powerful enough to implement many functions. Painting a clock is just a joke. The image pointer can be implemented using the drawImage of ctx. As for compatibility issues, there are already many online solutions. This stuff is used for play, not for application. Learn the canvas API.

First show

Implementation Code

The Code is as follows:
<Script type = "text/javascript">
// <! [CDATA [
Var time = new Date ();
Var h = time. getHours ();
Var m = time. getMinutes ();
Var s = time. getSeconds ();
Var weekday = {: 'sunday',: 'monday',: 'tuesday',: 'weday',: 'thurs',: 'Friday',: 'saturday '};
H = h>? (H-) * + parseInt (m/): h * + parseInt (m/); // the initial position of the hour.
// ==============================================
Var x =, y =, sAngle =; // x y origin second-hand angle variable
Function draw ()
{
Var c = document. getElementById ("myCanvas ");
Var ctx = c. getContext ("d ");
Ctx. clearRect (, c. width, c. height );
S ++; // seconds
// Background
Ctx. fillStyle = '# eee' // Make changes to the settings
Ctx. globalAlpha = .;
Ctx. fillRect (, c. width, c. height); // Draw a rectangle with new settings
// === Fill (indicating) origin ===
Ctx. beginPath ();
Ctx. arc (x, y, true );
Ctx. fill ();
Ctx. closePath ();
Var grd = ctx. createLinearGradient (x, y ,,);
Grd. addColorStop (, "# FF ");
Grd. addColorStop (.., "# FF ");
Grd. addColorStop (, "# FF ");
Ctx. fillStyle = grd;
Ctx. font = "pt Arial ";
Ctx. fillText ("html ",,);
Ctx. save ();
// Time scale
For (var I =; I <; I ++)
{
Var angle = (Math. PI *)/;
Ctx. beginPath ();
Var B = I = | I =
If (I % = ){
If (B ){
Ctx. fillStyle = "red ";
Radius =;
}
Else {
Ctx. fillStyle = "blue ";
Radius = .;
}
Ctx. font = "px Arial ";
Ctx. fillText (I/=? : I/, x-, y-); // x large-right small-left y size digital scale
}
Else
{
Ctx. fillStyle = "#";
Radius =;
}
If (s = I) radius = radius +;
Ctx. arc (x, y-, radius, true );
Ctx. fill ();
Transform (ctx, x, y, angle, true );
}
Ctx. restore ();
// ==================================
SAngle = (Math. PI *)/* s; // Second Degree
Ctx. save (); // hour hand
Ctx. fillStyle = "red ";
// Ctx. strokeStyle = "red ";
Ctx. lineWidth =;
Transform (ctx, x, y, (Math. PI *)/* h, true );
Sj (ctx, x, y, x-, y-, x +, y -);
Ctx. restore ();
Ctx. save (); // rotate the sub-needle
Ctx. fillStyle = "blue ";
Ctx. lineWidth =;
Transform (ctx, x, y, (Math. PI *)/* m, true );
Sj (ctx, x, y, x-, y-, x +, y -);
Ctx. restore ();
// Seconds
Ctx. save ();
Ctx. fillStyle = "#";
Transform (ctx, x, y, sAngle, true );
Sj (ctx, x, y, x-, y-, x +, y -);
Ctx. restore ();
// Data sorting
If (s % = ){
SAngle =, s =, m ++;
If (m =) {// rotate once every 12 minutes
If (m! =) H ++;
If (m % =) m =;
}
If (h % =) h =;
};
// * Note: if it is placed outside to determine whether the minute or hour hand turns, the operation will be repeated when the conditions are met. The reason is that each execution will only change the second hand at the moment *//
Var dateString = time. getFullYear () + "year" + (time. getMonth () + "month" + time. getDate () + "day" + weekday [time. getDay ()] + "h:" + time. getHours () + "m:" + m + "s:" + s;
Document. getElementById ("d"). innerHTML = dateString;
}
// Pointer triangle!
Function sj (ctx, x, y ){
// ==== Example ====
// Ctx. beginPath ();
// Ctx. moveTo (x, y );
// Ctx. lineTo (x, y -);
// Ctx. stroke ();
// Ctx. beginPath ();
//
// Ctx. moveTo (x-, y -);
// Ctx. lineTo (x +, y -);
// Ctx. lineTo (x, y --);
// Ctx. fill ();
Ctx. beginPath ();
Ctx. moveTo (x, y );
Ctx. lineTo (x, y );
Ctx. stroke ();
Ctx. beginPath ();
Ctx. moveTo (x, y );
Ctx. lineTo (x, y );
Ctx. lineTo (x, y );
Ctx. fill ();
}
// Rotate based on coordinates
Function transform (ctx, x, y, angle, B ){
If (B) {// clockwise
Ctx. transform (Math. cos (angle), Math. sin (angle ),
-Math. sin (angle), Math. cos (angle ),
X * (-Math. cos (angle) + x * Math. sin (angle ),
Y * (-Math. cos (angle)-y * Math. sin (angle ))
}
}
// ====== Execution per second ================= (optional execution event)
Window. setInterval (function () {draw ()},);
// Window. onload = function () {// same effect as above
// SetInterval ("draw ()",);
//};
//]>
</Script>