Guide de référence HTML

Catalogue complet des étiquettes HTML

Méthode strokeRect() de HTML canvas

strokeRect() est une méthode de Canvas 2L'API D dessine un rectangle de largeur w et de hauteur h avec un point de départ (x, y) dans le canevas en utilisant le style de dessin courant. Cette méthode dessine directement sur le canevas sans modifier le chemin courant, donc toute appelle suivante fill() ou stroke() ne l'affecte pas.

Référentiel HTML canvas

Exemple en ligne

Dessiner 100*100 pixels carrés :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de la méthode strokeRect() de HTML canvas (Tutoriel de base du site oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3">
Votre navigateur ne prend pas en charge l'HTML5　canvas étiquette.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2);
ctx.strokeRect(20,20,100,100);
</script>
</body>
</html>

Vérifiez et voyez si...‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9et Firefox, Opera, Chrome et Safari prennent en charge strokeRect() Méthode.

Attention :Internet Explorer 8 Les versions précédentes de ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode strokeRect() dessine un rectangle (sans remplissage). La couleur par défaut des traits est noire.

Avis :Utilisez strokeStyle Propriétés pour définir la couleur, le dégradé ou le motif du trait.

Syntaxe JavaScript :	context.strokeRect(x,y,width,height);

Valeur du paramètre

Paramètres	Description
x	L'ordonnée de la coin supérieur gauche du rectangle.
y	L'abscisse de la coin supérieur gauche du rectangle.
width	La largeur du rectangle, en pixels.
height	La hauteur du rectangle, en pixels.

Référentiel HTML canvas

HTML: <template> balise