English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Uno dei tipi di forme più facili da disegnare su un elemento canvas HTML5 è il rettangolo. Puoi utilizzare le funzioni fillRect() e strokeRect() del contesto 2D.
Uno dei tipi di forme più facili da disegnare su un elemento canvas HTML5 è il rettangolo. Puoi utilizzare le funzioni fillRect() e strokeRect() del contesto 2D. Ecco un esempio semplice:
<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
Canvas HTML5 non supportato
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>Testa per vedere ‹/›Puoi impostare lo spessore della linea del contorno del rettangolo utilizzando le proprietà lineWidth del contesto 2D. Ecco come fare:
<canvas id="ex4" width="500" height="150" style="border: 1px solid #cccccc;">
Canvas HTML5 non supportato
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var width = 100;
var height = 100;
context.lineWidth = 4;
context.strokeRect(x, y, width, height);
</script>Testa per vedere ‹/›Ecco l'aspetto del rettangolo con spessore della linea di 4:
Puoi impostare il colore di disegno del rettangolo utilizzando le proprietà fillStyle o strokeStyle del contesto 2D. Questo è un esempio, le impostazioni sono visualizzate in grassetto:
<canvas id="ex5" width="500" height="150" style="border: 1px solid #cccccc;">
Canvas HTML5 non supportato
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>Testa per vedere ‹/›Questo è un rettangolo disegnato di nuovo sul canvas: