HTML5 dessine des formes complexes dans le canevas avec des captures d'écran des compétences du didacticiel effect_html5

1. Dessinez des formes ou des chemins complexes

Lorsqu'un simple rectangle ne peut pas répondre aux besoins, l'environnement de dessin propose les méthodes suivantes pour dessiner des formes ou des chemins complexes.

beginPath() : Commencez à tracer un nouveau chemin.
closePath() : ferme la forme en traçant un segment de ligne du point actuel au point de départ du chemin.
fill(), Stroke() : remplissez une forme ou dessinez une forme creuse.
moveTo() : ​​​​Déplace le point actuel vers le point (x, y).
lineTo() : Tracez une ligne droite du point actuel au point (x, y).
arc(x,y,r,sAngle,eAngle,counterhoraire) : tracez un arc avec un rayon spécifié jusqu'au point (x,y).

2. Pour dessiner des formes complexes à l'aide de ces méthodes, vous devez suivre les étapes suivantes

Utilisez la méthode startPath() pour commencer à dessiner le chemin.
Utilisez les méthodes moveTo(), lineTo(), arc() pour créer des segments de ligne.
Utilisez closePath() pour terminer le dessin et fermer la forme (facultatif).
Utilisez Stroke() ou Fill() pour dessiner la bordure extérieure ou remplir la forme du chemin. L'utilisation de fill() fermera automatiquement tous les chemins non fermés.

3. Instructions de dessin Arc()


4. Dessiner des formes complexes sur toile

Copier le code

Le code est le suivant :

>
, la police suivante sera affichée-->
Conseils : Votre navigateur ne prend pas en charge la balise
🎜>


5. Effet de dessin