Maison > interface Web > Tutoriel H5 > HTML5 dessine des formes complexes dans le canevas avec des captures d'écran des compétences du didacticiel effect_html5

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

WBOY
Libérer: 2016-05-16 15:47:28
original
1702 Les gens l'ont consulté
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 :





HTML5

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


5. Effet de dessin


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal