Este ejemplo de artículo describe el método de JS+HTML5 para dibujar un reloj web. Dibuja un reloj con un péndulo que se puede usar en una página web. Se puede ajustar en tamaño y posición a través de botones. El contenido de implementación específico es el siguiente.
<html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> reloj </title> <script type = "text/javaScript"> var xclock = 300; // Posición central var yclock = 250; // Posición central var d = 180.0; // radio central del reloj Valor de la superficie del círculo de reloj = -d*1.07; function agrarge () {d ++;} function reduce () {d-;} function westwards () {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); g2d.translate (-1,0); // Establezca el origen del eje en el centro de la tabla C = document.getElementById ("mypéndulum"); g2d = c.getContext ("2d"); g2d.translate (-1,0); // Establezca el origen del eje en el centro de la tabla C = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); G2D.Translate (1,0); // Establezca el origen del eje en el centro de la tabla C = document.getElementById ("mypéndulum"); g2d = c.getContext ("2d"); G2D.Translate (1,0); // Establecer el eje se origina en el centro de la tabla} función hacia arriba () {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); g2d.translate (0, -1); // Establecer el eje se origina en el centro de la tabla C = document.getElementById ("mypéndulum"); g2d = c.getContext ("2d"); g2d.translate (0, -1); // Establecer el eje se origina en el centro de la tabla} función hacia abajo () {var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); g2d.translate (0,1); // Establecer el eje se origina en el centro de la tabla C = document.getElementById ("mypéndulum"); g2d = c.getContext ("2d"); g2d.translate (0,1); // Establezca el eje se origina en el centro de la tabla} función FillPolygon (A, B, FillColor, CTX) {ctx.beginpath (); ctx.moveto (a [0], b [0]); para (var j = 1; j <a.length; j ++) ctx.lineto (a [j], b [j]); ctx.closePath (); ctx.fillStyle = relleno; ctx.fill ();} function randomColor () {var s = "#"; for (var i = 0; i <3; i ++) s+= Math.floor (Math.random ()*16) .ToString (16); return s;} function loceCoordinate () {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); g2d.translate (xclock, yclock); // Establecer el eje de coordenadas se origina en el centro de la tabla var c = document.getElementById ("mypendulum"); var g2d = c.getContext ("2d"); g2d.translate (xclock, yclock); // Establecer el eje de coordenadas se origina en el centro de la tabla} function drawface () {// Defina el método Drawface en la superficie del reloj/* matriz del tamaño más pequeño del diamante Mark Vertex Coordinate que representa 1, 2, 4, 5, 7, 8, 10, 11 O'Clock*/var x = New Array (0, Math.Round (d/30), 0, Math. 30; var y = new Array (math.round (-d*1.07),-d, math.round (-d*0.9),-d);/*matriz de vértices coordenadas de un tamaño más grande que representan las posiciones de 3, 6, 9 y 12 o 'válvido*/var x1 = nuevo mata 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 (); // El último trazo, dibuje el borde del círculo del reloj // Comience a prepararse para dibujar un diamante que representa cada hora para (var i = 0; i <12; i ++) {// Para el cuerpo de bucle de la instrucción de bucle comienza si (i%3 == 0) {// dibuja un diamante rojo de tamaño más grande para representar 3,6,9,12 puntos Fillpolygon (x1, y1, "Red", ",", ",",); } else {// dibujar un diamante naranja más pequeño para representar las horas restantes Fillpolygon (x, y, "naranja", g2d); } // Tome el centro del reloj como origen, y el sistema de coordenadas gira en el sentido de las agujas del reloj en 30 grados para dibujar la marca de diamantes de la siguiente hora G2d.rotate (Math.Pi/6.0); } // para el extremo del cuerpo del bucle de la instrucción de bucle} // método de drawface extremo de la superficie del reloj/ * Método para definir la mano de la hora, la mano del minuto y la segunda mano del reloj DrawNeedles * Parámetro formal Hradian, Unidad Radian, es la posición radian Posición radiana de la segunda mano calculada a partir de 0 segundos. */function DrawNeedles (hradian, mradian, sradian) {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); // tomar el centro de reloj como el origen, y rotar el reloj radiano hradian para dibujar la hora de la hora g2d.rotate (hradian); // Organizar coordenadas que representan los vértices polígono de la hora de la hora var hx = nueva matriz (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); // coloque la mano de la hora en Purple-Red, // Tome el centro del reloj como origen, y gire el radiano hradiense en sentido antihorario para restaurar el sistema coordinado g2d.rotate (-hradian); // Tome el centro del reloj como origen, y gire el radian de los mradianos en sentido horario para dibujar la mano de minuto g2d.rotate (mradian); // La matriz de coordenadas que representa el vértice de polígono de la mano de la mano var mx = nueva matriz (math.round (-d/19), 0, math.round (d/19)); var my = new Array (0, Math.round (-d/1.3), 0); Fillpolygon (mx, my, "gris", g2d); // Establezca la mano del minuto en gris // Tome el reloj como origen, y el sistema de coordenadas gira el radian de los mradianos en sentido antihorario para restaurar el sistema de coordenadas g2d.rotate (-mradian); // Tome el reloj como origen, y el sistema de coordenadas gira el radian de sradian en sentido horario para dibujar el g2d.rotate de segunda mano (sradian); // segunda mano al color aleatorio g2d.strokestyle = 'verde'; 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 (); // Para el último trazo, dibuje la bola pequeña en el vértice de la segunda mano // tome el centro del reloj como origen, y gire el radiano sradian en sentido antihorario para restaurar el sistema de coordenadas g2d.rotate (-sradian); } // El bloque de código del método de la aguja de dibujo Dibuteiseedles/* Dibuja una cadena para representar el tiempo instantáneo*/function Drawtime () {var time = new Date (); // Obtenga la hora actual. var hora = time.gethours (); // Obtener la hora var minucin = time.getminutes (); // Obtenga el minuto var segundo = time.getSeconds (); // Obtenga el número de segundos var apm = "am"; // Pantalla predeterminada Mañana: AM. var canvas = document.getElementById ("mycanvas"); var g2d = canvas.getContext ("2d"); if (hora> 12) {// deja de mostrar hora = hora-12; apm = "pm"; } if (minuto <10) {// Si solo hay 1 dígito en el minuto, agregue 0 para mostrar minuto = "0"+minuto; } if (segundo <10) {// Si el número de segundos es solo 1 dígito, agregue 0 a mostrar segundo = "0"+segundo; } g2d.clearrect (-xClock, -yclock, 600,600); // Limpiar la pantalla var s = hora+":"+minuto+":"+segundo+":"+apm; g2d.fillstyle = "rojo"; g2d.font = d/4+ "px kaiti"; g2d.fillText (s, -d/1.8, d*1.4); g2d.font = d/4 + "px kaiyi"; // crear gradiente gradiente = g2d.createLineArGradient (0,0, canvas.width, 0); gradiente.addcolorStop ("0", "magenta"); gradiente.addcolorstop ("0.5", "azul"); gradiente.addcolorstop ("1.0", "rojo"); // relleno con gradiente de gradiente. // Obtenga la lectura minuciosa del momento de la creación, y calcule la lectura del arco de la mano del minuto, var b = math.pi/30 * minuto;/ * Obtenga la lectura de la hora del momento de la creación, y calcule la lectura del arco de la mano de la hora, en relación con 0 punto, y calcule la lectura de arco de la lectura de arco de la mano de la hora. * El grado del radian de que las manos de la hora camina es el punto por hora (30 grados por hora), más el valor de corrección del número de minutos pasados*/var a = math.pi/180* (30* hora + minuto/2);/* El sistema de coordenadas se traduce (xcLock, yClock) para que el eje coordinado se convierta en el centro del dial*/dibujo (); Dibujado (A, B, C); } // El extremo del bloque de código del método DrawTime var i = 0; function pendulum () {// pendulum_bobvar instantangle = nuevo Matriz (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); // La matriz de ángulo en tiempo real del péndulo var c = document.getElementById ("mypendulum"); var ctx = c.getContext ("2d"); var alfa = instantangle [i ++%instantangle.length]*math.pi/180; ctx.clearrect (-300, -300,900,900); ctx.ratate (alpha); // Establecer la segunda mano en el color aleatorio ctx.fillstyle = 'marrón'; ctx.fillrect (-3,0,6, d*1.4); ctx.shadowblur = 20; ctx.shadowcolor = "negro"; ctx.fillstyle = "azul"; // ctx.fillrect (-d/3.5, d*1.35, d/1.6, d/4.4); ctx.font = "40px kaiyi"; // crea gradiente gradiente = ctx.createLineArgradient (0,0, c.width, 0); gradiente.addcolorStop ("0", "magenta"); gradiente.addcolorstop ("0.5", "azul"); gradiente.addcolorstop ("1.0"). Llenar con gradiente // ctx.fillStyle = gradiente; ctx.fillstyle = "rojo"; ctx.FillText ("Big data",-D/3.2, D*1.55); ctx.shadowblur = 0; ctx.shadowcolor = null; ctx.fillstyle = null; ctx.rotate (-alpha); } Preparación de funciones () {loceCoordinate () setInterval ('Drawtime ()', 500); setInterval ('Pendulum ()', 200);} </script> <syle> #mycanvas {z-index: 3; Posición: Absoluto; Izquierda: 0px; arriba: 0px; } #mypendulum {z-índice: 2; Posición: Absoluto; Izquierda: 0px; superior: 0px;}#controlpanel {posición: absoluto; Izquierda: 600px; arriba: 0px; Ancho: 100px; Text-Align: Center; Font-Family: "Kaiti"; tamaño de fuente: 20px; Font-Weight: Bold; Color:#6c0;} </style> </head> <body onload = "preparation ()"> <Canvas id = "mycanvas"> <p> su navegador no admite el elemento Canvas! </p> </ Canvas> <Canvas ID = "Mypendulum"> <p> No es posible. id="controlPanel"><table><tr><td>Control</td><td>Button</td></tr><td><input value="Enlarge" type="button" onclick="enlarge()"></button></td><td><input value="Reduce" type="button" onclick="reduce()"></button></td></tr> <tr><td><input value="Left" type="button" onclick="westwards()"></button></td><td><input value="right" type="button" onclick="eastwards()"></button></td></tr> <tr><td><input value="upwards" type="button" onClick = "Upward ()"> </boton> </td> <td> <input value = "downwards" type = "button" onClick = "hacia abajo ()"> </botón> </td> </tr> </table> </div> </body> </html>Imagen de reproducción:
Espero que este artículo sea útil para la programación web de todos.