J'enverrai une horloge laide aujourd'hui, pour être honnête
Y a-t-il un outil pour déboguer Canvas? J'ai toujours besoin de rafraîchir l'effet dans le navigateur. Je suis tellement fatigué ~
(┬＿┬)
Code:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> Document </Title> <style> body {background: #eee; } canvas {background: #fff; } </ style> </ head> <body> <lebvas> Votre navigateur ne le prend pas en charge, veuillez mettre à niveau ... </ 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 (); }} / * Couleur gradiale * / 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,800,800); / * Draw the Circle Frame * / Cas.lineWidth = 3; Cas.shadowColor = "# 888"; Cas.shadowOffSetx = 1; Cas.shadowodDdsety = 1; Cas.shadowOffset = 5; Cas.Arc (400 400,200,0, Math.PI *, False); 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"; Cas.beginpath (); / * Fonction de la main d'heure * / Fonction aiguille (t, len, couleur) {var angle = math.pi / 180; Cas.beginPath (); Cas.strokestyle = couleur; Cas.moveto (400 400); Cas.lineto (400 + len * Math.cos ((t * 6-90) * angle), 400 + len * Math.Sin ((t * 6-90) * angle)); Cas.stroke (); } </ script> </ body> </html>L'objectif de cette horloge n'est pas sur la façon de le dessiner. Dans les fonctions trigonométriques, l'utilisation de fonctions trigonométriques est étroitement liée aux angles. Math.pi est π, math.sin (), math.cos (), ils acceptent tous les radians, donc ils doivent
Convertissez l'angle en radians. Avant de dessiner l'horloge, vous devez d'abord juger les conditions de l'horloge. Divisez le cercle en 60 parties, chaque partie représente une échelle et les coordonnées du cercle sont basées sur la direction positive des mathématiques. Donc,
Vous devez ajuster les coordonnées de départ et les réduire de 90 degrés à la même position que la position de départ de l'horloge.
Avant d'apprendre la toile, vous devez passer en revue les fonctions mathématiques que vous avez oubliées auparavant. Ce n'est pas quelque chose de compliqué à faire. L'apprentissage de la toile consiste à confirmer constamment les coordonnées, puis à les connecter aux lignes
Enfin, il est entraîné dans un diagramme, qui est le même que le point de ligne et de ligne pour faire surface en mathématiques.
Le code ci-dessus n'est pas difficile à utiliser des lignes pour dessiner, c'est-à-dire pour utiliser la fonction de dessin de ligne et remplir la couleur à plusieurs reprises. Oh ~ il y a aussi une balise audio pour l'utiliser, et le son qui atteint l'horloge
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.