Cet exemple d'article décrit la méthode de JS + HTML5 pour dessiner une horloge Web. Il dessine une horloge avec un pendule qui peut être utilisé sur une page Web. Il peut être ajusté en taille et en position à travers les boutons. Le contenu d'implémentation spécifique est le suivant.
<html> <éadfride> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <ittle> horloge </title> <script type = "text / javaScript"> var xclock = 300; // position centrale var yclock = 250; // position centrale var d = 180,0; // rayon central de la surface du cercle d'horloge Vale VaUR = -d * 1,07; fonction ENLARGE () {d ++;} fonction réteint () {d -;} fonction westward () {var c = document.getElementyid ("myCanvas"); var g2d = c.getContext ("2d"); g2d.translate (-1,0); // Définissez l'origine de l'axe au centre du tableau c = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); g2d.translate (-1,0); // Définissez l'origine de l'axe au centre du tableau c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); g2d.translate (1,0); // Définissez l'origine de l'axe au centre du tableau c = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); g2d.translate (1,0); // Définit l'axe originaire du centre du tableau} fonction upward () {var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); g2d.translate (0, -1); // Définit l'axe originaire du centre du tableau C = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); g2d.translate (0, -1); // Définit l'axe originaire du centre du tableau} fonction vers le bas () {var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); g2d.translate (0,1); // Définit l'axe originaire du centre du tableau C = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); g2d.translate (0,1); // Définit l'axe originaire du centre de la fonction} Fonction FillPolygon (a, b, fillcolor, ctx) {ctx.beginpath (); ctx.moveto (a [0], b [0]); pour (var j = 1; j <a.length; j ++) ctx.lineto (a [j], b [j]); ctx.closepath (); ctx.fillStyle = fillcolor; ctx.fill ();} fonction randomcolor () {var s = "#"; pour (var i = 0; i <3; i ++) Math.floor (math.random () * 16) .tostring (16); return s;} fonction locatecoordinate () {var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); g2d.translate (xclock, yclock); // Définissez l'axe de coordonnées proviennent du centre du tableau var c = document.getElementById ("mypendulum"); var g2d = c.getContext ("2d"); g2d.translate (xclock, yclock); // Définir l'axe de coordonnées originaire du centre du tableau} Fonction Drawface () {// Définissez la méthode de la surface de dessin à la surface de l'horloge / * de la taille plus petite des coordonnées du sommet de la marque de diamant * / var x = nouveau (0, math.Round (d / 30), 0, math.Round (-d / 30); var y = nouveau tableau (math.round (-d * 1.07), - d, math.round (-d * 0,9), - d); / * tableau de coordonnées de sommet de plus de taille plus grande représentant les positions de 3, 6, 9 et 12 heures * / var x1 = nouvel array (0, math.round (d / 15), 0, math.round (-d / 15); Array (math.round (-d * 1.13), - d, math.round (-d * 0.9), - d); var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); // BeginPath (); g2d.arc (0,0, d, 0, 2 * math.pi); g2d.strokestyle = "LightGray"; g2d.linewidth = d / 18; g2d.stroke (); // La dernière course, dessinez le bord du cercle d'horloge // commence à préparer à dessiner un diamant représentant chaque heure pour (var i = 0; i <12; i ++) {// pour que le corps de boucle de l'instruction LOOP commence si (i% 3 == 0) {// dessine un diamant rouge de plus grande taille pour représenter 3,6,9,12 points FillPolygon (x1, y1, "red); } else {// Dessinez un diamant orange plus petit pour représenter les heures restantes FillPolygon (x, y, "orange", g2d); } // Prenez le centre de l'horloge comme origine, et le système de coordonnées tourne dans le sens des aiguilles d'une montre de 30 degrés pour dessiner la marque de diamant de la position d'heure suivante G2D.ROTate (math.pi / 6.0); } // Pour le corps de boucle Extrémité du corps de l'instruction de boucle} // Méthode de surface de la surface Fin de la surface de l'horloge / * Méthode pour définir la main, l'unité de la main et la main de l'horloge, le paramètre formel Hradian, l'unité Radian, est la position radiane de la main de l'heure calculée à partir de 0 points, * Paramètre formel Mradian, un unité de l'unité, est la position radienne de la main de la main Radian, est la position radian de la seconde main calculée à partir de 0 seconde. * / fonction drawneedles (hradian, mradian, sradian) {var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); // prendre le centre horloge comme l'origine, et rotation le radian hradian dans le sens horaire pour tirer le dans le sens horaire de l'heure G2d.rotate (Hradian); // organiser des coordonnées représentant les sommets du polygone de la main de l'heure var hx = nouveau tableau (0, math.round (d / 19), 0, math.round (-d / 19)); var hy = nouveau tableau (math.round (-d / 2), math.round (-d / 3), 0, math.round (-d / 3)); FillPolygon (Hx, Hy, "Magenta", G2d); // Réglez la main de l'heure sur Purple-Red, // Prenez le centre d'horloge comme origine, et faites pivoter le radian hradian dans le sens antihoraire pour restaurer le système de coordonnées G2d.rotate (-hradian); // Prenez le centre de l'horloge comme origine et tournez le radian mradian dans le sens horaire pour dessiner la main g2d.rotate des minutes (Mradian); // le tableau de coordonnées représentant le sommet du polygone du Minge Hand var mx = nouveau tableau (Math.Round (-d / 19), 0, math.round (d / 19)); var my = nouveau tableau (0, math.round (-d / 1.3), 0); FillPolygon (MX, My, "Gray", G2d); // Réglez la main des minutes sur gris // Prenez l'horloge comme origine, et le système de coordonnées tourne le radian mradian dans le sens antihoraire pour restaurer le système de coordonnées G2d.rotate (-Mradian); // Prenez l'horloge comme origine, et le système de coordonnées tourne le radian sradian dans le sens des aiguilles d'une montre pour dessiner le G2d.rotate de seconde main (sradian); // seconde main à la couleur aléatoire g2d.strokestyle = 'vert'; 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 (); // Pour la dernière course, dessinez la petite balle au sommet de la seconde main // Prenez le centre de l'horloge comme origine et faites pivoter le radian sradian dans le sens antihoraire pour restaurer le système de coordonnées g2d.rotate (-sradian); } // Le bloc de code de la méthode d'aiguille de dessin DrawNeedles / * dessine une chaîne pour représenter le temps instantané * / fonction DrawTime () {var time = new Date (); // Obtenez l'heure actuelle. var hour = time.Gethours (); // Obtenez l'heure var minute = time.getMinutes (); // Obtenez la minute var seconde = time.getSeconds (); // obtient le nombre de secondes var apm = "am"; // Affichage par défaut matin: am. var canvas = document.getElementById ("myCanvas"); var g2d = canvas.getContext ("2d"); if (hour> 12) {// Arrêtez d'affichage d'Hour = heure-12; apm = "pm"; } if (minute <10) {// s'il n'y a qu'un seul chiffre dans la minute, ajoutez 0 à l'affichage minute = "0" + minute; } if (deuxième <10) {// Si le nombre de secondes n'est que 1 chiffre, ajoutez 0 pour afficher second = "0" + seconde; } g2d.clearrect (-xclock, -yyclock, 600,600); // Clean écran var s = hour + ":" + minute + ":" + second + ":" + apm; G2d.FillStyle = "Red"; g2d.font = d / 4 + "px kaiti"; g2d.fillText (s, -d / 1.8, d * 1.4); g2d.font = d / 4 + "px kaiyi"; // Créer GradientVar gradient = g2d.createelineargradient (0,0, canvas.width, 0); gradient.addcolorsop ("0", "magenta"); gradient.addcolorstop ("0,5", "bleu"); gradient.addcolorStop ("1.0", "rouge"); // remplissage avec gradientg2d.fillStyle = gradient; g2d.fillText ("big data", - d / 2.6, d / 2); // obtenir la deuxième lecture du moment de création d'instance, et calculer la lecture de l'arc de la seconde main, relative à 0 seconde, var c = math.pi / 30 * seconde; // Obtenez la lecture minute du moment de la création et calculez la lecture de l'arc de la main des minutes, var b = math.pi / 30 * minute; / * Obtenez la lecture de l'heure du moment de création, et calculez la lecture de l'arc de la main de l'heure, relative à 0 point, et calculez la lecture de l'arc de la lecture de l'arc de la main de l'heure. * Le degré du radian que la main d'heure marche est le point horaire (30 degrés par heure), plus la valeur de correction du nombre de minutes passées * / var a = math.pi / 180 * (30 * hour + minute / 2); / * Le système de coordonnées est traduit (xclock, yclock) de sorte que l'axe de coordonnées devient le centre du cadran * / drawface (); drawneedles (a, b, c); } // La fin du bloc de code de la méthode Drawtime var i = 0; fonction Pendulum () {// pendulum_bobvar instantangle = new 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); // le tableau d'angle en temps réel du pendule var c = document.getElementById ("mypendulum"); var ctx = c.getContext ("2d"); var alpha = instantangle [i ++% instantangle.length] * math.pi / 180; ctx.cllearrect (-300, -300 900,900); ctx.rate (alpha); // Réglez la seconde main sur la couleur aléatoire CTX.FillStyle = 'Brown'; ctx.fillrect (-3,0,6, d * 1.4); ctx.shadowblur = 20; ctx.shadowcolor = "noir"; ctx.fillStyle = "bleu"; // ctx.fillrect (-d / 3.5, d * 1.35, d / 1.6, d / 4.4); ctx.font = "40px kaiyi"; // créer GradientVar Gradient = CTX.CreateLineargradient (0,0, C.Width, 0); gradient.addcolorstop ("0", "magenta"); gradient.addcolorstop ("0,5", "blue"); avec gradient // ctx.fillStyle = gradient; ctx.fillStyle = "Red"; ctx.fillText ("Big Data", - D / 3.2, d * 1.55); ctx.shadowblur = 0; ctx.shadowcolor = null; ctx.fillStyle = null; ctx.rotate (-alpha); } Fonction Préparation () {locateCoordinate () setInterval ('DrawTime ()', 500); setInterval ('pendulum ()', 200);} </cript> <ystyle> #mycanvas {z-index: 3; Position: absolue; gauche: 0px; En haut: 0px; } #mypendulum {z-index: 2; Position: absolue; gauche: 0px; en haut: 0px;} # ControlPanel {position: absolue; Gauche: 600px; En haut: 0px; Largeur: 100px; Texte-aligne: Centre; Font-Family: "Kaiti"; taille de police: 20px; Police-poids: Bold; Couleur: # 6C0;} </ style> </ head> <body onload = "préparation ()"> <canvas id = "myCanvas"> <p> Votre navigateur ne prend pas en charge l'élément Canvas! </p> </ Canvas> <Canvas id = "mypendulum"> <p> Votre reproche ne prend pas en charge l'élément canevas! </ p> id = "ControlPanel"> <s tablel> <tr> <td> Control </td> <td> Button </td> </tr> <td> <input value = "enrller" type = "Button" onClick = "enrlare ()"> </ bouton> </ td> <td> <entrée Value = "Réduction" Type = "Button" onclick = "réduction ()"> </ bouton> </td> </tr> <tr> <td> <entrée valeur = "Left" type = "Button" OnClick = "Westward ()"> </ Button> </td> <Td> <Entrée Value = "Right" Type = "Button" OnClick = "Eastward ()"> </ Button> </td> </r> type = "Button" onClick = "upward ()"> </ bouton> </td> <td> <input value = "downward" type = "Button" onClick = "Downward ()"> </ Button> </td> </tr> </pable> </div> </ body> </ html>Image de reproduction:
J'espère que cet article sera utile à la programmation Web de chacun.