Exemples de dessin de rectangles en HTML5 Astuces du didacticiel Canvas_html5

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 :