Maison > interface Web > Tutoriel H5 > Exemples de dessin de rectangles en HTML5 Astuces du didacticiel Canvas_html5

Exemples de dessin de rectangles en HTML5 Astuces du didacticiel Canvas_html5

WBOY
Libérer: 2016-05-16 15:47:04
original
1693 Les gens l'ont consulté

Cet article est traduit de Steve Fulton et Jeff Fulton HTML5 Canvas, chapitre 2, « La forme rectangulaire de base ».

Jetons un coup d'œil à la forme géométrique simple intégrée à Canvas : le dessin d'un rectangle. Dans Canvas, il existe trois façons de dessiner un rectangle : remplir (fillRect), contour (StrokeRect) et effacer (clearRect). Bien entendu, nous pouvons également utiliser « chemin » pour décrire tous les graphiques, y compris les rectangles.

Voici les API des trois méthodes ci-dessus :

1.fillRect(x,y,largeur,hauteur). Dessinez un rectangle solide commençant à (x, y), avec largeur largeur et hauteur hauteur.
2.StrokeRect(x,y,largeur,hauteur). Dessinez une boîte rectangulaire commençant par (x, y), avec la largeur comme largeur et la hauteur comme hauteur. La boîte rectangulaire sera rendue dans différents styles en fonction des propriétés StrokeStyle, lineWidth, lineJoin et miterLimit actuellement définies.
3.clearRect(x,y,largeur,hauteur). Effacez la zone rectangulaire à partir de (x, y) avec la largeur et la hauteur pour la rendre complètement transparente.

Avant d'appeler la méthode ci-dessus pour dessiner le canevas, nous devons définir les styles de remplissage et de contour. La manière la plus simple de définir ces styles consiste à utiliser des couleurs 24 bits (représentées sous forme de chaînes hexadécimales). Voici un exemple simple :

Copiez le code
Le code est le suivant :

context. fillStyle = "#000000";
context.strokeStyle = "#ff00ff";

Dans l'exemple ci-dessous, la couleur de remplissage est définie sur noir et la couleur de trait est définie au violet :

Copier le code
Le code est le suivant :

fonction drawScreen( ) {
context.fillStyle = "#000000";
context.StrokeStyle = "#ff00ff";
context.lineWidth = 2;
context.fillRect(10, 10, 40, 40) ;
context .StrokeRect(0, 0, 60, 60);
context.clearRect(20, 20, 20, 20);
}

Le résultat de l'exécution du code est comme indiqué ci-dessous :

É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