Manuale di riferimento HTML

Completo elenco dei tag HTML

Metodo rect() su canvas HTML

Il metodo rect() è una funzione dell'API Canvas 2D per creare un percorso rettangolare, il punto di partenza del rettangolo è (x, y), le dimensioni sono width e height. I 4 punti del rettangolo sono collegati con linee rette, il percorso di sottopagina viene utilizzato come etichetta di chiusura, quindi puoi riempire o contornare il rettangolo.

Manuale di riferimento per HTML canvas

Esempio online

Disegna un rettangolo di 150x100 pixel:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Utilizzo del metodo rect() su canvas HTML (Guida di base oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta l'etichetta HTML5 canvas.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
</script>　
</body>
</html>

Prova a vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano rect() Metodo.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

Il metodo rect() crea un rettangolo.

Suggerimento:Usa: stroke() ofill() Il metodo disegna effettivamente un rettangolo sul canvas.

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

Valore del parametro

Parametro	Descrizione
x	Coordenata x dell'angolo superiore sinistro del rettangolo.
y	Coordenata y dell'angolo superiore sinistro del rettangolo.
width	Larghezza del rettangolo, in pixel.
height	Altezza del rettangolo, in pixel.

Esempio online

Creare tre rettangoli utilizzando il metodo rect():

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Utilizzo del metodo rect() su canvas HTML (Guida di base oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta l'etichetta HTML5 canvas.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
//　红色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);　　
ctx.stroke();
//　绿色矩形
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
//　蓝色矩形
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
</script>　
</body>
</html>

Prova a vedere ‹/›

Manuale di riferimento per HTML canvas

HTML: <template> etichetta