Bonjour, mes chers amis, je méprise le front de moi, écrivez des blogs pour la première fois et n'écrivez pas bien, pardonnez-moi de comprendre.
Avant d'enseigner, je pense que vous êtes intelligent. avec ça ici;
BIEN! L'image ci-dessous est l'effet simple après notre achèvement.
1. Définir la toileTout d'abord, nous insérons maintenant la balise <lebvas> dans le fichier HTML pour définir la taille du canevas. En même temps, la couleur d'arrière-plan de Canvas est définie dans la table de style interne (pour regarder quand elle est pratique pour le dessin);
<! Canvas {Background: # 5151A2;} </ Style> </ Head> <Body> <Canvas Id = Canvas Width = 800 Height = 600> </Body> </html>Le noyau suivant consiste à dessiner un moulin à vent dans l'environnement JS natif; Graphiques 2D sur la toile;
<script type = text / javascript> // Obtenez le contexte 2D de l'obtention du canevas.2. Dessinez la base de moulin à vent
La figure géométrique de la base du moulin à vent ressemble à un trapèzoïde mince et mince. Regardez directement le code ~~!
// Définissez une fonction, la base inférieure de la fonction de vent de package Buttom () {ctx.beginpath (); (0, # CCC); = doublure; // La méthode de remplissage du trapézoïdal est définie sur la variable (couleur du gradient) CTX.Moveto (395 300); Point de départ Ligne de dessin CTX.LIMETO (410 600);Jetons un coup d'œil à l'effet dans la page, est-ce simple?
(Je sens que je suis un peu trop ~! ~!)
3. Dessinez les feuillesLa partie suivante sera l'endroit le plus critique de cette animation. Peut également avoir dans votre cœur. Comment tirer la forme des feuilles? Les feuilles peuvent-elles être copiées et collées? La réponse est certainement correcte, faisons-le!
Analyse de réflexion:
1) Parce que la forme des trois feuilles est exactement la même, nous devons seulement dessiner une feuille. Appelez-le simplement la fonction bind ()! Intersection Appelez-le! Pourquoi! Votre TM est trop intelligent
2) Trois feuilles ont un cœur rond. La méthode Translate () est utilisée ici, le système de coordonnées mobiles!
3) Le point le plus difficile est de comprendre comment l'animation est réalisée ici, car le principe d'animation affectera la structure du document de notre peinture: la structure des feuilles:
Tout d'abord, nous créons un nouvel environnement de dessin, nous l'appelons l'environnement 1, nous dessions la première feuille sur l'environnement 1; puis tournez à 120 ° pour créer le premier environnement de dessin 2 sous la prémisse du premier environnement de dessin. Appeler la feuille à la hausse (), dessiner les deux feuilles; ;
Si nous voulons réaliser l'animation, nous devons faire pivoter l'environnement de dessin 1 de la première feuille. Intersection Barrage: 6666666
4) En fin de compte, certains styles d'apparence de base sont débogués! Comme les gradients, la transparence, etc.!
Dessiner les feuillesQuand j'ai peint cette forme de feuille, j'ai été lentement débogue.
Ici, je déclare une variable var num = 0;, comme paramètre des modifications du nombre de rotation de l'environnement: Regardons directement le code directement! Intersection Intersection
Var num = 0; , La rotation du système de coordonnées CTX.ROTATE ((MATH.PI / 180) * NUM); Liner1.addcolorsstop (0, # ccc); La première fois Ctx.BeginPath (); tourne à 120 ° CTX.SAVE (); 120); // Répondre avant le deuxième état (système de coordonnées rotatifs) // dessiner ctx.beginpath (); CCC); Système de coordonnées de traduction) num + = 5;停的变化 ， ****** **************************************** **************************************************** **************************************************** **************************************************** ***********. 30, -12); 12,30,12);4. Définir l'animation
Cette partie de l'animation est relativement simple. Intersection Intersection
SetInterval (function () {ctx.clearrect);}, 50);Code source: https://github.com/224137748/canvas/blob/master/windmill.html
Ce qui précède est tout le contenu de cet article.