Enviaré un reloj feo hoy, para ser honesto
¿Hay alguna herramienta para depurar el lienzo? Siempre necesito actualizar el efecto en el navegador. Estoy tan cansado ~
(┬＿┬)
Código:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </title> <style> body {background: #eee; } Canvas {fondo: #fff; } </style> </head> <body> <vallvas> Su navegador no lo admite, por favor, actualice ... </Canvas> <audio id = "audio" src = "1.wav"> </audio> <script> var oaudio = document.getElementByid ("audio"); var oCas = document.getElementsByTagName ("Canvas") [0]; var cas = oCas.getContext ("2d"); oaudio.ontimeUpdate = function () {if (oaudio.currenttime> 0.1) {this.Pause (); }} /*Color gradial* / var color = cas.createradialgradient (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,0,800,800); /*dibuja el marco de círculo* / cas.linewidth = 3; cas.shadowcolor = "#888"; cas.shadowoffsetx = 1; cas.shadowodsety = 1; cas.shadowlur = 5; 5; Cas.arc (400,400,200,0, Math.pi*2, Falso); 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 = date.getSeconds (); CAS.BEGINPATH (); /* Función de la Hour Hand*/Function Needle (t, len, color) {var ángulo = math.pi/180; Cas.BeginPath (); Cas.StrokeStyle = color; 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>El enfoque de este reloj no está en cómo dibujarlo. En las funciones trigonométricas, el uso de funciones trigonométricas está estrechamente relacionado con los ángulos. Math.pi es π, math.sin (), math.cos (), todos aceptan radianes, por lo que deben
Convierta el ángulo en radianes. Antes de dibujar el reloj, primero debe juzgar las condiciones del reloj. Divida el círculo en 60 partes, cada parte representa una escala, y las coordenadas del círculo se basan en la dirección positiva en las matemáticas. Por lo tanto,
Debe ajustar las coordenadas iniciales y reducirlas en 90 grados a la misma que la posición inicial del reloj.
Antes de aprender el lienzo, debe revisar las funciones matemáticas que ha olvidado antes. No es algo complicado de hacer. El aprendizaje del lienzo es confirmar constantemente las coordenadas y luego conectarlas en líneas
Finalmente, se dibuja en un diagrama, que es lo mismo que el punto a la línea y la línea de la superficie en las matemáticas.
El código anterior no es difícil de usar líneas para dibujar, es decir, usar la función de dibujo de línea y llenar el color repetidamente. Oh ~ también hay una etiqueta de audio para usarla, y el sonido que llega al reloj está marcando ticing ~
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.