Commencez avec HTML Toile

Sep 16, 2025

Comment

[dix] [dix] [dix]

[dix]

Le HTML & LT; Canvas & GT; L'élément est une solution puissante pour créer des graphiques à base de pixels sur le Web en utilisant Javascript et vous permettra de créer des effets remarquables avec un peu de pratique.

[dix]

Dans ce didacticiel, nous examinerons la création d'un objet Canvas, en tirant des visuels simples et en animant ces visuels.

01. Créer une page

La toile est fondamentalement un élément HTML que vous placez sur la page, à l'échelle pour couvrir la zone que vous souhaitez et puisse ensuite s'appuyer sur. Pour commencer, nous devons créer une page simple avec un objet Canvas.

 & lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; tête & gt;
  & lt; Meta Charset = 'UTF-8' / & GT;
  & lt; Titre & GT; HTML Canvas Demo & LT; / Titre & GT;
  & lt; link rel = 'stylesheet' href = 'Custom.CSS' / & GT;
  & lt; script src = "canvas.js" & gt; & lt; / script & gt;
  & lt; / tête & gt;
  & lt; corps & gt;
  & lt; canvas id = "html-canvas" & gt;
  & lt; / corps & gt;
& lt; / html & gt;

02. Échelle de la toile

Pour nous donner beaucoup d'espace pour jouer avec, nous voulons que notre canvas remplisse tout l'écran. Nous allons aussi lui donner un fond noir pour que vous sachiez que c'est définitivement là. Cela peut effectivement être un peu délicat à faire sans se retrouver avec des barres de défilement ni de l'espace blanc. Le CSS ci-dessous devrait s'en occuper.

 Canvas {
  Hauteur: 100vh;
  largeur: 100vw;
  Position: absolu;
  Couleur de fond: # 000000;
}
  marge: 0;
  rembourrage: 0;
}

03. Initialise la toile d'utilisation

Ensuite, nous devons ajouter du JavaScript pour configurer la toile prête à être utilisée. Nous aurons une adaptation d'un événement DomContentOached pour vous assurer que le script n'essaie pas de fonctionner avant que l'élément Canvas soit prêt. Nous l'aurons également définir la résolution de la toile pour correspondre à la zone à laquelle elle couvre - sinon la toile augmentera sans augmenter la résolution, conduisant à des graphiques flous ou pixellés.

[dix]

 Document.addeventlistener ("DomContentOached", fonction () {
  var canvas = document.getelementByID ("HTML-Canvas");
  var cordles = [];
  var rayon = 50;
  canevas.width = canvas.clientwidth;
  Canvas.Height = Canvas.clientheight;
  var context = canvas.getcontext ("2d");
}, faux);

04. Tracez une forme

Vous remarquerez que lors de la dernière étape, nous avons cité quelque chose appelé «contexte». C'est ainsi que le dessin sur la toile se produit. Il est plus facile de penser au contexte comme un pinceau que nous pouvons utiliser pour dessiner différentes lignes, arcs et formes de base.

Ce que nous pouvons maintenant faire est de mettre notre contexte à utiliser en écrivant une fonction de trésorerie qui créera un arc à 360 degrés - c'est-à-dire un cercle. Nous le faisons en disant au contexte de définir un arc, de fixer des styles pour la frontière et de remplissage, puis augmentez les fonctions de remplissage () et de course () pour dessiner réellement la forme (trait tire la bordure).

 Fonction DrawCercle (X, Y, RADIUS, BORDER, BORDER_COLOUR, FILL_COLOUR)
  {
  contexte.beginpath ();
  contexte.arc (x, y, rayon, 0,2 * math.pi);
  contexte.strokestyle = frontière_colour;
  contexte.fillstyle = remplir_colour;
  context.linewidth = frontière;
  contexte.closepath ();
  contexte.fill ();
  contexte.stroke ();
  }

05. Créer de nombreux cercles

[dix]

Génial. Nous avons une fonction qui peut dessiner des cercles. Maintenant, nous avons besoin de quelque chose à dessiner. Étendons le code de l'étape 3 pour créer un tableau décrivant des objets de cercle. Il stockera les coordonnées X et Y de chaque cercle, la couleur et la valeur de la direction.

Nous créons cette structure de tableau plutôt que de simplement dessiner des cercles tout de suite car cela nous permettra d'animer les cercles en réémayant le contenu de la matrice ultérieurement.

 Pour (var i = 0; i & lt; 20; i ++) {
  var x = rayon + (math.random () * (canvas.width - (2 * rayon)));
  var y = rayon + (math.random () * (Canvas.Height - (rayon 2 *)));
  Var couleur = randomcolour ();
  var orientation = math.random () * 2.0 * math.pi;
  cercles.push ({x: x, y: y, couleur: couleur, direction: direction});
  tirer(); }

06. Randomise la couleur

Au cours de la dernière étape, nous avons utilisé quelques nouvelles fonctions qui n'ont pas encore été définies. Commençons par RandomColour (). Ce sera une fonction utilitaire qui renvoie une chaîne hexadécimale randomisée représentant une couleur. C'est assez simple de mettre en œuvre.

 fonction randomcolour () {
  var caractères = '0123456789Abcdef';
  Var Color = '#';
  pour (var i = 0; i & lt; 6; i ++) {
  couleur + = caractères [math.floor (math.random () * 16)];
  }
  Couleur de retour; }

07. Dessinez les graphiques sur la page

Maintenant, nous sommes prêts à amener les choses ensemble en mettant en œuvre la fonction Tirage (). Cela fera deux choses essentielles. Premièrement, il effacera la toile en utilisant la fonction ClearRect (). Ce sera important lorsque nous venons d'animer nos cercles, pour éviter de dessiner le nouveau cadre sur le dessus de l'ancien. Il ira ensuite à travers le tableau que nous avons construit et dessinez chaque cercle sur la toile de succession en utilisant notre fonction de dessin au cerveau.

 Fonction Draw () {
  context.clearrect (0, 0, canvas.width, canvas.height);
  cercles.foreach (fonction (cercle) {
  dessin au cercle (cercle.x, cercle.y, rayon, 5, cercle.colour, cercle.colour);
    }); }

08. Animez les formes

Si vous essayez maintenant, vous verrez des cercles statiques peints sur la page. Mais nous voulons les animer. Pour ce faire, nous devons élargir notre traite () à quelques manières. Premièrement, nous utiliserons la valeur Circle.Direction que nous avons poussée à la matrice pour calculer les modifications de la position X et Y pour le cercle.

Ensuite, nous utiliserons une fonction intégrée appelée demandeanimationframe qui appelle récursivement la fonction Draw (). RequentanimationFrame Permet au navigateur de décider quand appeler la fonction à nouveau, en évitant la nécessité de mettre en œuvre des minuteries à calculer quand dessiner la trame suivante.

 Fonction Draw () {
  context.clearrect (0, 0, canvas.width, canvas.height);
  cercles.foreach (fonction (cercle) {
  cercle.x = cercle.x + math.cos (cercle.direction);
  cercle.y = cercle.y + math.sin (cercle.direction);
  dessin au cercle (cercle.x, cercle.y, rayon, 5, cercle.colour, cercle.colour);
  });
  demandaimationframe (dessin);
  }

09. rebondissez au bord de la page

Il y a une chose qui manque encore, cependant. Les cercles disparaissent maintenant hors du bord de l'écran. Faisons-les rebondir. Pour ce faire, nous ajouterons un appel à une nouvelle fonction, rebondir (cercle), dans la fonction de boucle de Foreach de la fonction Draw ().

La fonction de rebond déterminera lorsqu'un cercle est au bord de l'écran et ajuste sa valeur de direction de manière appropriée.

 Fonction Bounce (Cercle) {
  Si ((((Circle.x - rayon) & lt; 0) || ((((Circle.y - rayon) & lt; 0) || (((((Circle.x + rayon) & gt; canvas.width) || ((cercle. y + rayon) & gt; canvas.height)) {
  cercle.direction + = (math.pi / 2);
  }
  if (cercle.direction & gt; (2 * math.pi)) {
  cercle.direction - = (2 * math.pi);
  }
}

Cet article est apparu à l'origine dans Concepteur web numéro 266. Achetez-le ici.

Articles Liés:

Créer un croquis de gravure numérique à l'aide de toile
Tout ce que vous devez savoir sur le nouveau nœud.js 8
Comment exporter des animations après les effets sur HTML5

[dix] [dix]

[dix]

Commencez avec HTML Toile

01. Créer une page

02. Échelle de la toile

03. Initialise la toile d'utilisation

04. Tracez une forme

05. Créer de nombreux cercles

06. Randomise la couleur

07. Dessinez les graphiques sur la page

08. Animez les formes

09. rebondissez au bord de la page

Comment - Most Popular Articles

Comment écrire du code HTML plus rapidement

Utilisez l'espace négatif pour dessiner de meilleures mains

Reconstruire un site Web Flash de 2004 pour 2018

Créer une conception de logo parfaitement géométrique dans l'illustrateur

Age une photo dans Photoshop CC

Faites un gif animé dans Photoshop

Comment créer une belle peinture de paysage aquarelle

Utilisez des particules pour créer un éclabousseur 3D

Catégories