Este exemplo de artigo descreve o método do JS+HTML5 para desenhar um relógio da web. Ele desenha um relógio com um pêndulo que pode ser usado em uma página da web. Pode ser ajustado em tamanho e posição através dos botões. O conteúdo de implementação específico é o seguinte.
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> relógio </title> <script type = "text/javascript"> var xclock = 300; // posição central var yclock = 250; // Posição central var d = 180.0; // raio central da superfície do círculo de relógio var valor = -d*1,07; function alarge () {d ++;} função reduz () {d-;} função oeste () {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); G2D.Translate (-1,0); // Defina a origem do eixo no centro da tabela c = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); G2D.Translate (-1,0); // Defina a origem do eixo no centro da tabela c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2D"); G2D.Translate (1,0); // Defina a origem do eixo no centro da tabela c = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); G2D.Translate (1,0); // Defina o eixo originário no centro da tabela} função upwards () {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2D"); G2D.Translate (0, -1); // Defina o eixo originário no centro da tabela C = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); G2D.Translate (0, -1); // Definir o eixo originário no centro da tabela} função para baixo () {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); G2D.Translate (0,1); // Defina o eixo originário no centro da tabela C = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); G2D.Translate (0,1); // Definir o eixo originário no centro da tabela} função FillPolygon (A, B, FillColor, Ctx) {ctx.BeginPath (); ctx.moveto (a [0], b [0]); (var j = 1; j <A.Length; j ++) ctx.lineto (a [j], b [j]); ctx.closePath (); ctx.fillstyle = prehillColor; ctx.fill ();} função RandomColor () {var s = "#"; para (var i = 0; Math.Floor (Math.Random ()*16) .ToString (16); return s G2D.Translate (Xclock, Yclock); // Defina o eixo de coordenada Origem no centro da tabela var c = document.getElementById ("mypendulum"); var g2d = c.getContext ("2D"); G2D.Translate (Xclock, Yclock); //Set the coordinate axis originate at the center of the table} function drawFace(){ //Define the drawFace method on the surface of the clock/* Array of the smaller size of the diamond mark vertex coordinates representing 1, 2, 4, 5, 7, 8, 10, 11 o'clock*/var x = new Array(0, Math.round(d/30), 0, Math.round(-d/30)); var y = nova matriz (math.Round (-d*1,07),-d, math.ound (-d*0,9),-d);/*array de coordenadas de vértices de um tamanho maior representando as posições de 3, 6, 9 e 12 horas*/var x1 = nova matriz (0, math.1) (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 (); // O último golpe, desenhe a borda do círculo do relógio // comece a se preparar para desenhar um diamante representando cada hora para (var i = 0; i <12; i ++) {// para o corpo do loop da instrução loop iniciar se (i%3 == 0) {// desenhar um diamante vermelho maior para representar 3,6,1,12 de poço; } else {// desenhe um diamante laranja menor para representar as horas restantes Fillpolygon (x, y, "laranja", G2D); } // Pegue o centro do relógio como a origem, e o sistema de coordenadas gira no sentido horário em 30 graus para desenhar a marca de diamante da próxima hora da posição g2d.rotate (math.pi/6.0); }//For loop body end of the loop statement}//DrawFace method end of the clock surface/* Method for defining the hour hand, minute hand, and second hand of the clock drawNeedles* formal parameter Hradian, unit radian, is the radian position of the hour hand calculated from 0 points, * formal parameter Mradian, unit radian, is the radian position of the minute hand calculated from 0 minutes, * formal parameter Sradian, unit radian, is A posição radiana da segunda mão calculada a partir de 0 segundos. */Função desenhada (hradiana, mradiana, sradiana) {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); // pega o centro do relógio como a origem e gira o hradiano radian) para desenhar a hora da hora G2D.ROTATE (HRADian; // organiza coordenadas representando os vértices de polígonos da hora da mão var hx = nova matriz (0, Math.Round (d/19), 0, Math.Round (-d/19)); var hy = nova matriz (Math.Round (-d/2), Math.Round (-d/3), 0, Math.Round (-d/3)); FILLPOLYGON (HX, HY, "Magenta", G2D); // Defina a hora de hora para roxo-Red, // pegue o centro do relógio como a origem e gire o radiano hradiano no sentido anti-horário para restaurar o sistema de coordenadas G2D.rotato (-hradiano); // Pegue o centro do relógio como origem e gire o Radian Madian no sentido horário para desenhar o minuto G2D.Rotate (Mradian); // A matriz de coordenadas que representa o vértice do polígono da mão minuciosa var mx = nova matriz (Math.ound (-d/19), 0, math.lound (d/19)); var my = nova matriz (0, math.ound (-d/1.3), 0); FILLPOLYGON (MX, MY, "Grey", G2D); // Defina a mão minuciosa para cinza // Pegue o relógio como a origem, e o sistema de coordenadas gira o Radian Mradian no sentido anti-horário para restaurar o sistema de coordenadas g2d.rotate (-mradian); // Pegue o relógio como a origem, e o sistema de coordenadas gira o Radian Sradiano no sentido horário para desenhar a segunda mão G2D.Rotate (Sradian); // segunda mão para a cor aleatória 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.ound (-d), d/18, 0, 2*math.pi); g2d.fillstyle = RandomColor (); g2d.fill (); // Para o último golpe, desenhe a pequena bola no vértice da segunda mão // pegue o centro do relógio como origem e gire o radiano sradiano no sentido anti-horário para restaurar o sistema de coordenadas g2d.rotate (-sradian); } // O bloco de código do método da agulha de desenho desenhado/* desenhe uma string para representar o tempo instantâneo*/função drawtime () {var time = new Date (); // Obtenha a hora atual. var hour = time.gethours (); // obtenha a hora var minuto = time.getminutes (); // Obtenha o minuto var secundal = time.getSeconds (); // obtenha o número de segundos var apm = "am"; // Exibição padrão de manhã: AM. var canvas = document.getElementById ("mycanvas"); var g2d = Canvas.getContext ("2D"); if (hora> 12) {// pare de exibir hora = hora-12; apm = "pm"; } if (minuto <10) {// Se houver apenas 1 dígito no minuto, adicione 0 para exibir minuto = "0"+minuto; } if (segundo <10) {// Se o número de segundos for de apenas 1 dígito, adicione 0 para exibir segundo = "0"+segundo; } g2d.clearrect (-xclock, -yclock, 600.600); // tela limpa var s = hora+":"+minuto+":"+segundo+":"+apm; g2d.fillstyle = "vermelho"; g2d.font = d/4+ "px kaiti"; g2d.fillText (s, -d/1.8, d*1.4); g2d.font = d/4 + "px kaiyi"; // crie gradientvar gradiente = g2d.createlineargradient (0,0, canvas.width, 0); gradiente.addcolorstop ("0", "magenta"); gradiente.addcolorstop ("0.5", "azul"); gradiente.addcolorstop ("1.0", "" "; gradienteg2d.fillstyle = gradiente; g2d.fillText ("big data",-d/2.6, d/2); // obtém a segunda leitura do momento de criação da instância e calcule a leitura do arco da segunda mão, em relação a 0 segundos, var c = math.pi/30 * segundo; // Obtenha a leitura minuciosa do momento da criação e calcule a leitura do arco do ponteiro minuto, var b = math.pi/30 * minuto;/ * Obtenha a hora da leitura do momento da criação e calcule a leitura do arco do ponteiro da hora, em relação ao 0 ponto e calcule a leitura do arco da mão do poço da hora. * O grau do Radian que a hora anda é o ponto horário (30 graus por hora), mais o valor de correção do número de minutos passados*/var a = Math.pi/180* (30* hora + minuto/2);/* O sistema de coordenadas é traduzido (xclock, yclock) para que o eixo da coordenada se torne o centro do center do Dial*/Xclock, yclock), para que o eixo da coordenada se torne o center do Dial*; Drawneedles (A, B, C); } // O final do bloco de código do método drawtime var i = 0; function 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); // a matriz de ângulo em tempo real do Pendulum var c = document.getElementById ("mypendulum"); var ctx = c.getContext ("2d"); var alpha = instantangle [i ++%instantangle.length]*math.pi/180; ctx.clearRect (-300, -300, -300] // Defina a segunda mão como a cor aleatória ctx.fillstyle = 'Brown'; ctx.fillRect (-3,0,6, d*1.4); ctx.shadowblur = 20; ctx.shadowcolor = "preto"; ctx.fillstyle = "azul"; // ctx.fillRect (-d/3.5, d*1.35, d/1.6, d/4.4); ctx.font = "40px kaiyi"; // crie gradientVar gradient = ctx.createlineargradient (0,0, c.width, 0); gradiente.addcolorstop ("0", "magenta"); gradiente.addcolorstop ("0.5", ""); com gradiente // ctx.fillstyle = gradiente; ctx.fillstyle = "vermelho"; ctx.fillText ("big data",-d/3.2, d*1.55); ctx.shadowblur = 0; ctx.shadowcolor = null; ctx.fillstyle = null; ctx.rotato (-Alpha); } função preparação () {locatEcoordinate () setInterval ('drawtime ()', 500); setInterval ('Pendulum ()', 200);} </sCript> <yoy> #mycanvas {z-index: 3; Posição: Absoluto; Esquerda: 0px; Top: 0px; } #mypendulum {z-index: 2; Posição: Absoluto; Esquerda: 0px; TOP: 0px;}#ControlPanel {Posição: Absolute; Esquerda: 600px; Top: 0px; Largura: 100px; Alinhamento de texto: centro; Fonte-família: "Kaiti"; Size da fonte: 20px; Peso da fonte: negrito; Cor:#6c0;} </style> </head> <corpo onload = "preparação ()"> <canvas id = "mycanvas"> <p> seus navegadores não suportam o elemento da tela! id = "ControlPanel"> <table> <tr> <td> Control </td> <td> botão </td> </tr> <td> <insput value = "ampliar" type = "button" onclick = "alarge ()"> </toxt> </td> <td> <input) ONCLICK = "Reduced ()"> </botão> </td> </tr> <tr> <td> <insput value = "left" type = "button" onclick = "westwards ()"> </button> </td> <tbutt> <input value = "type =" ""> onClick = "Eastwards ()" value = "upwards" type = "button" onclick = "upwards ()"> </button> </td> <td> <insput value = "Downward" type = "button" onclick = "Downwards ()"> </but uma button> </td> </tr> </tabela </div> </body> </html>Imagem de reprodução:
Espero que este artigo seja útil para a programação da Web de todos.