Vou mandar um relógio feio hoje, para ser honesto
Existe alguma ferramenta para depurar a tela? Eu sempre preciso atualizar o efeito no navegador. Estou tão cansado ~
(┬＿┬)
Código:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </title> <yoy> body {background: #eee; } canvas {background: #fff; } </style> </ad Head> <body> <Canvas> Seu navegador não o suporta, atualize ... </canvas> <audio id = "áudio" src = "1.wav"> </udio> <cript> var oaudio = document.getElementby ("audio"); var ocas = document.getElementsByTagName ("Canvas") [0]; var cas = ocas.getContext ("2d"); oudio.ontimeUpdate = function () {if (oaudio.currenttime> 0.1) {this.pause (); }} /*Cor gradial* / var color = Cas.CreamRadialGradient (400.400.10.400.400.200); color.addcolorstop (0, "#f1f4f5"); color.addcolorstop (1, "#C5C6C7"); setInterval (function () {oaudio.currenttime = 0; oaudio.play (); cas.clearrect (0,0,800.800); /*desenhe o quadro do círculo* / Cas.LineWidth = 3; Cas.ShadowColor = "#888"; Cas.ShowOffsetX = 1; Cas.Shadw Cas.arc (400.400,200,0 Cas.shadowoffsetx = 0; Cas.Moveto (400+Math.Cos (I*6*Math.Pi/180)*200.400+Math.sin (I*6*Math.Pi/180)*200); } else {Cas.moveto (400+Math.cos (i*6*Math.pi/180)*200,400+Math.sin (i*6*Math.pi/180)*200); CAS.LINETO (400+ (200-LEN)*MATH.COS (I*6*MATH.PI/180), 400+(200-LEN)*MATH.SIN (I*6*Math.Pi/180)) S = Data.GetSends (); Cas.beginpath (); /* função da hora da hora*/função agulha (t, len, cor) {var angle = math.pi/180; Cas.BeginPath (); cas.strokestyle = cor; Cas.moveto (400.400); Cas.lineto (400+len*Math.cos ((t*6-90)*ângulo), 400+len*math.sin ((t*6-90)*ângulo)); Cas.stroke (); } </script> </body> </html>O foco deste relógio não está em como desenhá -lo. Nas funções trigonométricas, o uso de funções trigonométricas está intimamente relacionado aos ângulos. Math.pi é π, Math.sin (), Math.cos (), todos eles aceitam radianos, então devem
Converter o ângulo em radianos. Antes de desenhar o relógio, você deve primeiro julgar as condições do relógio. Divida o círculo em 60 partes, cada parte representa uma escala e as coordenadas do círculo são baseadas na direção positiva da matemática. Portanto,
Você precisa ajustar as coordenadas iniciais e reduzi -las em 90 graus para a mesma posição inicial do relógio.
Antes de aprender a tela, você deve revisar as funções matemáticas que já esqueceu antes. Não é algo complicado de fazer. O aprendizado da tela é confirmar constantemente as coordenadas e depois conectá -las em linhas
Finalmente, é atraído para um diagrama, que é o mesmo que o ponto a ser alinhado e alinhado para surgir na matemática.
O código acima não é difícil de usar linhas para desenhar, ou seja, para usar a função de desenho de linha e preencher a cor repetidamente. Oh ~ Há também uma tag de áudio para usá -la, e o som que chega ao relógio está correndo ticking ~
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.