Ich werde heute eine hässliche Uhr schicken, um ehrlich zu sein
Gibt es ein Tool, um Leinwand zu debuggen? Ich muss den Effekt im Browser immer aktualisieren. Ich bin so müde ~
(┬＿┬)
Code:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> document </title> <style> Body {Hintergrund: #eee; } canvas {Hintergrund: #fff; } </style> </head> <body> <Canvas> Ihr Browser unterstützt es nicht, bitte upgraden ... </canvas> <audio id = "audio" src = "1.wav"> </audio> <cript> 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 (); }} /*Gradial Color* / 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. 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.Fillstyle = "#858384"; /* Funktion der Stundenhand*/Funktionsnadel (t, len, Farbe) {var Angle = Math.pi/180; Cas.BeginPath (); Cas.strokestyle = Farbe; Cas.Moveto (400.400); Cas.lineto (400+len*math.cos ((t*6-90)*Winkel), 400+len*math.sin ((t*6-90)*Winkel); Cas.Stroke (); } </script> </body> </html>Der Fokus dieser Uhr liegt nicht darauf, wie man sie zeichnet. Bei trigonometrischen Funktionen hängt die Verwendung trigonometrischer Funktionen eng mit den Winkeln zusammen. Math.pi ist π, math.sin (), math.cos (), sie akzeptieren alle Radians, also müssen sie
Den Winkel in Radians umwandeln. Vor dem Zeichnen der Uhr müssen Sie zuerst die Bedingungen der Uhr beurteilen. Teilen Sie den Kreis in 60 Teile, jeder Teil repräsentiert eine Skala, und die Koordinaten des Kreises basieren auf der positiven Richtung in der Mathematik. Daher,
Sie müssen die Startkoordinaten einstellen und sie um die Startposition der Uhr um 90 Grad reduzieren.
Bevor Sie Leinwand lernen, müssen Sie die mathematischen Funktionen überprüfen, die Sie zuvor vergessen haben. Es ist nicht kompliziertes zu tun. Das Erlernen von Leinwand besteht darin, die Koordinaten ständig zu bestätigen und sie dann mit Linien zu verbinden
Schließlich wird es in ein Diagramm gezogen, das in der Mathematik der Punkte zu Linie und Linie zur Oberfläche entspricht.
Der obige Code ist nicht schwer zu zeichnen zu verwenden, dh die Leitungszeichnung und Farbe wiederholt zu füllen. Oh ~ Es gibt auch ein Audio -Tag, das es benutzt, und der Sound, der die Uhr erreicht, tickt tickend ~
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.