Manual de référence HTML

Glossaire des balises HTML

Méthode rect() HTML canvas

rect() est une méthode de Canvas 2La méthode createRect() de D API crée un chemin de rectangle, avec un point de départ à (x, y), une taille de width et height. Le rectangle4points connectés par des lignes, le sous-trajet étant utilisé comme étiquette de fermeture, donc vous pouvez remplir ou dessiner le contour du rectangle.

Manuel de référence de HTML canvas

Exemple en ligne

dessiner 150*10Rectangle de 0 pixels :

示例

!DOCTYPE html>
<html>
<head>
<title>HTML canvas rect() 方法的使用(基础教程网 oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　Balise canvas.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
</script>　
</body>
</html>

Voyons voir ‹/›

Compatibilité des navigateurs

IEFirefoxOperaChromeSafari

Internet Explorer 9et Firefox, Opera, Chrome et Safari supportent rect() méthode.

Remarque :Internet Explorer 8 Les versions précédentes de HTML ne supportent pas l'élément <canvas>.

Définition et utilisation

La méthode rect() crée un rectangle.

Astuce :Utilisez stroke() oufill() La méthode dessine effectivement un rectangle sur le canevas.

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

Valeur du paramètre

Paramètres	Description
x	Coordonnée x du coin supérieur gauche du rectangle.
y	Coordonnée y du coin supérieur gauche du rectangle.
width	Largeur du rectangle, en pixels.
height	Hauteur du rectangle, en pixels.

Exemple en ligne

Créez trois rectangles à l'aide de la méthode rect() :

示例

!DOCTYPE html>
<html>
<head>
<title>HTML canvas rect() 方法的使用(基础教程网 oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　Balise canvas.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
//　Rectangle rouge
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);　　
ctx.stroke();
//　Rectangle vert
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
//　Rectangle bleu
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
</script>　
</body>
</html>

Voyons voir ‹/›

Manuel de référence de HTML canvas

HTML: <template> balise