Préface: j'ai fini de lire la toile de la toile de JS Book aujourd'hui. Je suis si heureux ~ Je suis à nouveau ma toile bien-aimée ~ ouye ~
J'ai vu quelqu'un me suggérant de dessiner un gros homme bleu avant, oui, pourquoi ai-je oublié le gros homme préféré que j'avais dans mon enfance? Afin d'exprimer mes excuses au Blue Fat Man, j'ai dessiné un Hello World en mouvement aujourd'hui, qui est également une sorte d'amélioration ~
D'accord, s'il vous plaît, allez vers l'intérieur pour les passagers. Veuillez ne pas bloquer le passage, merci. Drivons ~
texte:
Prenons une photo aujourd'hui et voyons l'effet
Aujourd'hui, le gros bleu ressemble à ceci, et je me sens soulagé de voir qu'il est toujours si gros. Ce monde est encore plein d'énergie positive, et il y a encore des gens qui sont plus gros que moi, hahahaha
Puis le code
partie HTML
<canvas id = "myCanvas"> allez et mettez à niveau votre navigateur ~ </ canvas>
Partie js
Window.AddeventListener ("Load", function () {// Get the Canvas Context Var context = Document.getElementById ("MyCanvas"). GetContext ("2D"); // Jugez si le contexte existe, s'il existait, vous pouvez exécuter le code suivant si (contexte) {// Démarrer un nouveau contexte. L'horloge // dessine un grand cercle extérieur context.arc (100,100,99,0,2 * math.pi, false); // rempli context.fillStyle = "# 315f9b"; context.fill (); // dessiner le bord du grand cercle context.stroke (); // démarrer une nouvelle sous-parent. à (194,100), et calculer le contexte ponctuel.moveto (194,100); // dessiner le petit cercle à l'intérieur (dieu rond?) Apparaît ~ // Créer un objet d'image et définir son SRC sur l'image var de l'homme de Blue Fat = new Image (); image.src = "2.png"; // utilisez la méthode de contexte Drawimage pour dessiner l'image à partir du point (25,25), et dessinez-le dans un rectangle avec une longueur latérale de 150 contextes. (100,100) En tant que nouvelle origine, c'est-à-dire (0,0) context.translate (100,100); // dessiner notre contexte de point de temps.fillstyle = "# 02285a"; // Le premier paramètre est la chaîne à dessiner, le deuxième paramètre est x, et le troisième est Y // La valeur suivante, la valeur y est l'effet après débougage. Situations.FillText ("12", - 5, -80); context.fillText ("6", - 4,87); context.fillText ("3", 80,1); context.fillText ("9", - 86,1); // voir plus de détails sur cette fonction maintenant (contexte);}}, false);Les cadrans des horloges ci-dessus apparaissent, mais la raison la plus importante pour laquelle l'horloge est une horloge est qu'elle peut afficher le temps (non-sens), donc l'étape suivante consiste à dessiner le pointeur.
partie de la fonction maintenant
Fonction MAINTENANT (Context) {// Créer un objet Date pour obtenir le temps local var mydate = new Date (); // Obtenez des heures, des minutes, des secondes var MyHour = MyDate.Gethours (); // Convert Hour au format 12 heures if (MyHour> = 12) {MyHour = MyHour-12; MyDate.getSeconds (); // Décrivez l'heure // Utiliser pour stocker les radians de l'heure actuelle sur le cadran var hourarc; // utilisez 3 heures comme point de départ de la circonférence, représentant les radians dans le sens horaire si (myhour <3) {hourArc = 2 * Math.pi- (3-Myhour) * Math.pi / 6;} else {hourArc = (MyHour-3) * math.pi / 6;} // en pointant vers 3, 6, 9, 12, il s'agit exactement d'un multiple de 90 ° // il y a une déviation par rapport à l'angle converti en radians, donc un traitement spécial est donné pour changer (MyHour) {cas 0: hourarc = math.pi * 3/2; Break; Cas 3: hourArc = 0; Break; Cas 6: Hourc = Math.pi / 2; Break; Cas 9: hourArc = math.pi; Break;} // Call Drawtime Fonction and Drawtime (contexte, hourarc, 60); // dessiner des minutes // utilisez le minarc Radian var sur le cadran de la minute actuelle sur le cadran; // utilise 15 minutes comme point de départ de la circonférence pour représenter le radian dans le sens des aiguilles d'une montre if (mymin <15) {minarc = 2 * math.pi- (15-mymin) * math.pi / 30;} else {Minarc = (mymin-15) * math.pi / 30;} // Processing minutes Math.pi * 3/2; Break; Cas 15: Minarc = 0; Break; Case 30: Minarc = Math.pi / 2; Break; Case 45: Minarc = Math.pi; Break;} // Call Drawtime Fonction and Drawtime (context, Minarc, 80); // Draw Seconds // Utilisez le point de départ actuel, et représente le Radiant sur le Radiant sur le Radiant sur le Radiant du Radiant; dans le sens horaire if (mysec <15) {secarc = 2 * math.pi- (15-mycyc) * math.pi / 30;} else {secarc = (mysec-15) * math.pi / 30;} // traitement pendant des secondes, il est toujours là parce que l'angle est converti en radians et il y a une déviation, donc un traitement spécial est l'interrupteur (MySec) Math.pi * 3/2; Break; Cas 14: Secarc = 0; Break; Cas 29: Secarc = Math.pi / 2; Break; Case 44: Secarc = Math.pi; Break;} // Call Drawtime Fonction et Drawtime (Context, Secarc, 80, "Red"); // Définit une fonction d'appel de temps de temps, de l'appel pour l'appel de temps de temps pour un tirage au sort pour un tirage au courant Nouveau pointeur, bien sûr, vous devez effacer la main d'origine.Alors, comment dessiner spécifiquement les pointeurs lorsque nous exploitons le contexte? Je ne sais pas non plus, alors terminons-le aujourd'hui ~
Je plaisante, hehe, prenez-vous en douceur (je dois prétendre que je vais jouer avec vous)
Ensuite, la fonction Drawtime, qui a quatre paramètres au total (contexte, thearc, thelength, color = "# 000"). Le contexte voit à travers le contexte qui est la toile à première vue, Thearc est l'angle où nous voulons faire pivoter la toile, la longueur représente la longueur du pointeur et la couleur est la couleur du pointeur.
Fonction Drawtime (context, thearc, theLength, color = "# 000") {// Enregistrez l'environnement de canevas actuel et utilisez-le en conjonction avec la méthode de restauration pour restaurer le contexte de canevas.save (); // rotate la toile, les paramètres passés dans le rotate Représentant le contexte de rotation radian. context.beginpath (); // déplacez le point de départ vers (0,0) context.moveto (0,0); // dessiner un chemin vers (thelength, 0); // dessiner ce chemin avec la couleur de couleur spécifiée context.strokestyle = la couleur; // la largeur du chemin est 2Context.Linewidth = 2; // Le chemin est invisible. Si vous souhaitez voir le chemin, vous devez utiliser un trait pour tracer la ligne. Comment tracer cette ligne peut être définie par les plusieurs attributs que nous avons utilisés ci-dessus; // restaurer le contexte de contexte.Restore ();}Bien qu'il touche à sa fin, il existe également une fonction de temps clair très important. Sans cela, votre horloge sera occupée par des secondes denses. Nous avons tous la responsabilité de prendre soin des patients atteints de phobie intensive.
Fonction Cleartime (Context) {// Nous commençons un nouveau sous-chemin, puis dessinons un cercle plein de beaux bleus, couvrant les pointeurs que nous avons dessinés avant, ce qui équivaut à effacer le dial context.beginpath (); context.arc (0,0,80,0,2 * math.pi, false); context.fillstyle = "# 4ba2cf"; blessé par accident, alors invoquez-le à nouveau, et ce sera vous, pikachu (? huh) var image = new image (); image.src = "2.png"; // cette coordonnée est différente des coordonnées chargées pour la première fois, car nous avons modifié la matrice de transformation, vous souvenez-vous encore? Par conséquent, leurs coordonnées devraient être un contexte complémentaire.Eh bien, ok, c'est vraiment là ici maintenant, il est presque temps d'aller prendre un repas ~ chers programmeurs mignons, n'oubliez pas de manger ~