In diesem Artikel wird die Methode von JS+HTML5 beschrieben, um eine Webuhr zu zeichnen. Es zeichnet eine Uhr mit einem Pendel, das auf einer Webseite verwendet werden kann. Es kann in Größe und Position durch Tasten eingestellt werden. Der spezifische Implementierungsinhalt ist wie folgt.
<html> <kopf> <meta http-äquiv = "content-type" content = "text/html; charSet = utf-8"/> <title> Uhr </title> <script type = "text/javaScript"> var xclock = 300; // Center Position var yclock = 250; // Mittelposition var d = 180,0; // Mittelradius des Taktkreises Oberflächen -Varwert = -d*1.07; Funktion Enlarge () {d ++;} Funktion record () {d-;} Funktion Westwards () {var c = document.getElementById ("mycanvas"); var g2d = c.GetContext ("2D"); g2d.translate (-1,0); // Setzen Sie den Achsenursprung in der Mitte der Tabelle c = document.getElementById ("myPendulum"); G2D = C.GetContext ("2D"); g2d.translate (-1,0); // Setzen Sie den Achsenursprung in der Mitte der Tabelle c = document.getElementById ("mycanvas"); var g2d = C.GetContext ("2d"); g2d.translate (1,0); // Setzen Sie den Achsenursprung in der Mitte der Tabelle c = document.getElementById ("myPendulum"); G2D = C.GetContext ("2D"); g2d.translate (1,0); // Setzen Sie die Achse in der Mitte der Tabelle} -Funktion nach oben () {var c = document.getElementById ("mycanvas"); var g2d = C.GetContext ("2d"); g2d.translate (0, -1); // Setzen Sie die Achse in der Mitte der Tabelle c = document.getElementById ("myPendulum"); G2D = C.GetContext ("2D"); g2d.translate (0, -1); // Setzen Sie die Achse in der Mitte der Tabelle} funktion nach unten () {var c = document.getElementById ("mycanvas"); var g2d = cegetcontext ("2d"); g2d.translate (0,1); // Setzen Sie die Achse in der Mitte der Tabelle c = document.getElementById ("myPendulum"); G2D = C.GetContext ("2D"); g2d.translate (0,1); // Setzen Sie die Achse in der Mitte der Tabelle} Funktion fillPolygon (a, b, fillcolor, ctx) {ctx.beginPath (); ctx.moveto (a [0], b [0]); für (var j = 1; j <a.länge; j ++) ctx.lineto (a [j], b [j]); ctx.closepath (); Math.floor (math.random ()*16) .tostring (16); return s;} function locatecoordinate () {var c = document.getElementById ("mycanvas"); var g2d = C.GetContext ("2d"); g2d.translate (xclock, yclock); // Setzen Sie die Koordinatenachse in der Mitte der Tabelle var c = document.getElementById ("myPendulum"); var g2d = C.GetContext ("2d"); g2d.translate (xclock, yclock); // Setzen Sie die Koordinatenachse in der Mitte der Tabelle} Funktionsdrawface () {// Definieren Sie die Drawface-Methode auf der Oberfläche des Takts/* Array der kleineren Größe der Vertex-Koordinaten der Diamantmarke, die 1, 2, 4, 5, 7, 8, 10, 11 Uhr darstellen. var y = new Array (math.round (-d*1,07),-d, math.round (-d*0,9),-d);/*Array von Scheitelpunktkoordinaten einer größeren Größe, die die Positionen von 3, 6, 9 und 12 Uhr darstellt*/var X1 = New Array (0, Math.Round (D/15), 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, Math. Array (math.round (-d*1.13),-d, math.round (-d*0,9),-d); var c = document.getElementById ("mycanvas"); var g2d = ceggetContext ("2d"); // beginPath (); g2d.arc (0,0, d, 0, 2*math.pi); g2d.strokestyle = "lightgray"; g2d.linewidth = d/18; g2d.stroke (); // Der letzte Schlag zeichnen Sie die Kante des Taktkreises // Beginnen Sie mit der Vorbereitung auf das Zeichnen eines Diamanten, der jede Stunde für (var i = 0; i <12; i ++) {// für den Schleifenkörper der Schleifenaussage beginnt, beginnt, wenn (i%3 == 0) {// eine größere Größe rotes Diamant zeichnen, um 3,6,9,12 Punkte zu repräsentieren. } else {// zeichne einen kleineren orangefarbenen Diamanten, um die verbleibenden Stunden -Füllpolygon darzustellen (x, y, "orange", g2d); } // Nehmen Sie die Mitte der Uhr als Ursprung, und das Koordinatensystem dreht sich im Uhrzeigersinn um 30 Grad, um die Diamantmarke der nächsten Stunde Position G2D.Rotate (Math.Pi/6.0) zu zeichnen; } // Für das Schleifenkörperende der Schleifenanweisung} // Zeichnungsmethode Ende der Taktoberfläche/ * Methode zur Definition der Stundenhand, der winzigen Hand und der zweiten Hand der Takt -Drawnedles * formaler Parameter Hradian, Einheitseinheit Die Radianposition der gebrauchten Hand berechnet aus 0 Sekunden. */Funktion Drawneedles (Hradian, MRADIAN, SRADIAN) {var c = document.getElementById ("mycanvas"); var g2d = C.GetContext ("2d"); // Nehmen Sie die Uhr Mitte als Ursprung und drehen Sie den Hradian -Radian -Eil, um die Stunde Hand zu zeichnen. // Koordinaten anordnen, die die Polygonscheitelpunkte des Stundenhands darstellen, var hx = Neuarray (0, math.Round (d/19), 0, math.Round (-d/19)); var hy = new Array (math.round (-d/2), math.round (-d/3), 0, math.round (-d/3)); FILLPOLYGON (HX, HY, "Magenta", G2D); // Stellen Sie die Stundenhand auf lila-rot ein, // Nehmen Sie das Uhrenzentrum als Ursprung und drehen Sie den Hradian Radian gegen den Uhrzeigersinn, um das Koordinatensystem G2D.Rotate (-hradian) wiederherzustellen. // Nehmen Sie das Uhrenzentrum als Ursprung und drehen Sie den MRADIAN RADIAN im Uhrzeigersinn, um die winzige Hand G2D.ROTATE (MRADIAN) zu zeichnen. var my = new Array (0, math.round (-d/1,3), 0); fillpolygon (mx, mein, "grau", g2d); // Setzen Sie die minute Hand auf Grau // Nehmen Sie die Uhr als Ursprung, und das Koordinatensystem dreht den MRADIAN RADIAN gegen den Uhrzeigersinn, um das Koordinatensystem G2D.rotate (-mradian) wiederherzustellen. // Nehmen Sie die Uhr als Ursprung, und das Koordinatensystem dreht den sradianen Radian im Uhrzeigersinn, um den Second -Hand -G2D.rotate (Sradian) zu zeichnen. // Sekundenzeiger zur zufälligen Farbe g2d.strokestyle = 'grün'; g2d.linewidth = "1"; g2d.moveto (0,0); g2d.lineto (0, math.round (-d/1.1)); g2d.stroke (); g2d.beginPath (); g2d.arc (0, math.round (-d), d/18, 0, 2*math.pi); G2D.FillStyle = randomColor (); g2d.fill (); // Zeichnen Sie für den letzten Schlag den kleinen Ball am Scheitelpunkt der Sekundenzeigerin // die Mitte der Uhr als Ursprung aufnehmen und den Sradian Radian gegen den Uhrzeigersinn drehen, um das Koordinatensystem G2D.rotate (-sradian) wiederherzustellen; } // Der Codeblock der Zeichnungsnadelmethode gezeichnet/* Zeichnen Sie eine Zeichenfolge, um die sofortige Zeit darzustellen*/Funktion DrawTime () {var time = new Date (); // Erhalten Sie die aktuelle Zeit. var hour = time.gethours (); // die stunde var minute = time.getminutes () erhalten; // Erhalten Sie die Minute var Second = time.getSeconds (); // Die Anzahl der Sekunden erhalten var apm = "Am"; // Standard -Anzeigemorgen: Am. var canvas = document.getElementById ("mycanvas"); var g2d = canvas.getContext ("2d"); if (stündlich> 12) {// Hör auf, Stunde = Stunde-12 anzuzeigen; apm = "pm"; } if (minute <10) {// Wenn in der Minute nur 1 Ziffer vorhanden ist, fügen Sie 0 hinzu, um Minute = "0"+Minute anzuzeigen; } if (Second <10) {// Wenn die Anzahl der Sekunden nur 1 Ziffer ist, fügen Sie 0 hinzu, um Second = "0"+Second anzuzeigen; } g2d.clearRect (-xclock, -yclock, 600.600); // Clean Screen var g2d.fillStyle = "rot"; g2d.font = d/4+ "px kaiti"; G2D.FillText (s, -d/1,8, d*1,4); g2d.font = d/4 + "px kaiyi"; // Gradientvar erstellen gradienten = g2d.createlineargradient (0,0, canvas.width, 0); Gradient.addcolorStop ("0", "Magenta"); Gradient.AddcolorStop ("0,5", "Blue"); Gradient.addcolorStop ("1.0", "rot"); // fill mit gradientg2d.fillStyle = Gradient; g2d.filltext ("Big Data",-d/2,6, d/2); // Erhalten Sie den zweiten Messwert des Instanz-Erstellungsmoments und berechnen Sie die Lichtbogenlesung der Sekundenzeigung, relativ zu 0 Sekunden, var c = math.pi/30 * Sekunde; // Erhalten Sie die winzige Lektüre des Erstellungsmoments und berechnen Sie die Lichtbogenlesung der winzigen Hand. * Der Grad des Radians, dass die Stundenhandspaziergänge der Stundenpunkt (30 Grad pro Stunde) sowie der Korrekturwert der Anzahl der übergebenen Minuten sind gezogene (a, b, c); } // Das Codeblockende der Methode DrawTime var i = 0; Funktion pendulum () {// pendulum_bobvar Instantangle = neu Array (64,61,56,49,40,29,16,3, -8, -16, -29, -40, -49, -56, -61, -64,- 64, -64, -61, -56, -49, -40, -29, -16, -8,3,16,29,40,49,56,61,64,64); // Das Echtzeit-Winkel-Array des Pendels var c = document.getElementById ("myPendulum"); var ctx = c.GetContext ("2D"); var; var; Alpha = Instantangle [i ++%Instantangle.length]*Math.pi/180; ctx.clearRect (-300, -300.900.900); Ctx.Rotate (Alpha); // Setzen Sie den Sekundenzeiger auf die zufällige Farbe ctx.fillstyle = 'braun'; Ctx.FillRect (-3,0,6, d*1,4); ctx.shadowblur = 20; ctx.shadowcolor = "schwarz"; ctx.fillstyle = "blau"; // ctx.fillRect (-d/3,5, d*1,35, d/1,6, d/4,4); ctx.font = "40px kaiyi"; // GradientVar -Gradient = ctx.createlineargradient (0,0, C. Gwidth, 0); Gradient.AddcolorStop ("0", "Magenta"); Gradient.Addcolorstop ("0,5", "Blue"); Gradient.addcolorstop ("0,5", "Blue"); Gradient.addcolorstop (",", ","); mit Gradient // ctx.FillStyle = Gradient; ctx.FillStyle = "rot"; Ctx.FillText ("Big Data",-d/3,2, d*1,55); ctx.shadowblur = 0; ctx.shadowcolor = null; } function preparation () {locatecoordinate () setInterval ('DrawTime ()', 500); setInterval ('pendulum ()', 200);} </script> <style> #mycanvas {z-Index: 3; Position: absolut; links: 0px; Oben: 0px; } #mypendulum {z-Index: 2; Position: absolut; links: 0px; TOP: 0PX;}#ControlPanel {Position: Absolute; links: 600px; Oben: 0px; Breite: 100px; Text-Align: Mitte; Schriftfamilie: "Kaiti"; Schriftgröße: 20px; Schriftgewicht: fett; Farbe:#6c0;} </style> </head> <body onload = "preparation ()"> <canvas id = "mycanvas"> <p> Ihre Browserdoes unterstützen das Canvas -Element nicht! ID = "ControlPanel"> <table> <tr> <td> Steuerung </td> <td> Taste </td> </tr> <td> <Eingabewert = "Enlarge" type = "button" onclick = "enlarge ()"> </td> <td> <taste = "type" type "type" type "type" onclick = "recly)"> </button> </td> </tr> <tr> <td> <Eingabewert = "links" type = "button" onclick = "Westwards ()"> </button> </td> <td> <Eingabewert = "rechts" type "type". type = "button" onclick = "Upwards ()"> </button> </td> <td> <Eingabewert = "downwards" type = "button" "onclick =" downwards () "> </button> </td> </tr> </table> </div> </body> </html> </tr> </table> </div> </body> </html>Reproduktionsbild:
Ich hoffe, dieser Artikel wird für die Webprogrammierung aller hilfreich sein.