Comment utiliser l'élément de canevas HTML5 avec JavaScript?

Canvas est un élément utilisé dans HTML pour le dessin et doit être utilisé en combinaison avec JavaScript. 1. Insérez la balise dans HTML et définissez l'ID; 2. Obtenez l'élément Canvas via JS et créez un objet de contexte; 3. Utilisez l'objet de contexte pour dessiner un graphique, tel que le rectangle de remplissage de remplissage, le rectangle de trait, le cercle de dessin à l'arc, etc.; 4. Pour implémenter l'animation, vous devez constamment repeindre le canevas et la méthode de requestanimationframe est couramment utilisée; 5. Canvas prend également en charge le chargement d'images et la surveillance des événements de souris pour atteindre des fonctions interactives. Après avoir maîtrisé ces étapes, vous pouvez développer des mini-jeux, des graphiques et d'autres applications.

Canvas est en fait un élément HTML qui peut être utilisé pour dessiner. Après avoir été utilisé en combinaison avec JavaScript, vous pouvez dessiner des graphiques, des animations et même faire de petits jeux sur des pages Web. La clé est de comprendre les méthodes de dessin de base et comment contrôler le canevas avec JS.

Préparation: Ajoutez un élément de toile à HTML

La première étape de l'utilisation du canevas consiste à insérer une balise <canvas></canvas> dans la page HTML. C'est comme une toile vierge, sans contenu ni frontières par défaut:

 <canvas id = "myCanvas" width = "500" height = "300"> </ canvas>

Cet élément lui-même n'est qu'un conteneur. Comment le dessiner dépend entièrement de JavaScript pour le contrôler. N'oubliez pas de régler id pour cela, afin qu'il puisse être obtenu via JS à l'avenir.

Ensuite, obtenez l'élément dans JS et créez un objet "contextuel", qui est la base du canevas de fonctionnement:

 const canvas = document.getElementById («myCanvas»);
const ctx = canvas.getContext ('2d');

Dessinez la forme de base: commencez par le rectangle

Canvas est une méthode de dessin basée sur un chemin. Par exemple, pour dessiner un rectangle, vous devez d'abord définir le chemin, puis caresser ou remplir:

 CTX.FillStyle = 'Blue'; // Réglez la couleur de remplissage CTX.filrect (50, 50, 100, 100); // Remplissez un rectangle: x = 50, y = 50, largeur 100, hauteur 100

Ce code tirera un carré bleu. Si vous souhaitez afficher uniquement le contour au lieu du rembourrage, vous pouvez utiliser:

• ctx.strokeStyle = 'red';
• ctx.strokeRect(50, 50, 100, 100);

De plus, Canvas prend également en charge les cercles de dessin, les lignes, le texte, etc. Par exemple, l'étape de dessin d'un cercle est:

1. Chemin de démarrage: ctx.beginPath();
2. Créer un chemin circulaire: ctx.arc(x, y, radius, startAngle, endAngle);
3. Stroke ou remplissage: ctx.stroke() ou ctx.fill()

Écran d'animation et de mise à jour: implémentez-le avec DequestanimationFrame

Si vous voulez que le contenu sur Canvas se déplace, vous devez constamment repeindre la toile. Une méthode courante consiste à combiner requestAnimationFrame() :

 fonction animate () {
    ctx.ClearRect (0, 0, canvas.width, canvas.height); // Effacer le canevas // Repraw un nouveau cadre ici demandeanimationframe (animate);
}

animer();

Le code ci-dessus est la structure de base de l'animation. Chaque appel à animate() effacera la toile et le repeindra pour réaliser un effet dynamique. Vous pouvez ajouter des variables à cette fonction pour contrôler la position du graphique, comme faire bouger ou tourner une balle.

Ce qui doit être noté est:

• Chaque fois que vous repeignez, vous devez effacer l'image précédente, sinon l'ancien contenu restera.
• Pour contrôler la fréquence de l'animation, essayez d'utiliser requestAnimationFrame au lieu de setInterval , le premier est plus efficace.

Images et interactions: non seulement dessiner des graphiques

La toile peut non seulement dessiner des formes, mais aussi des images de chargement:

 const img = new image ();
img.src = 'image.png';
img.onload = function () {
    ctx.DrawImage (IMG, 0, 0); // dessine l'image sur la toile}

Vous pouvez également écouter des événements de souris, tels que cliquer et glisser, afin que Canvas ait des capacités interactives:

 canvas.addeventListener ('click', fonction (e) {
    const rect = canvas.getBoundingClientRect ();
    const x = e.clientx - rect.left;
    const y = e.clienty - rect.top;
    console.log (`cliquez sur ($ {x}, $ {y})`);
});

La combinaison de ces fonctions peut créer des applications complexes telles que les mini-jeux, les graphiques, les outils de visualisation, etc.

Fondamentalement, c'est tout. La toile semble simple, mais il existe de nombreux détails, en particulier le système de coordonnées, le dessin de chemin, l'optimisation des performances et d'autres aspects sont facilement négligés. Essayez-le plus et vous pourrez le maîtriser bientôt.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!