Contorni e riempimento Canvas HTML5

Ogni volta che si disegna una forma su un canvas HTML5, è necessario impostare due proprietà: Stroke (tratto) e Fill (riempimento)

Proprietà di tratto e riempimento

Ogni volta che si disegna una forma su un canvas HTML5, è necessario impostare due proprietà:

1. Stroke

2. Fill

Stroke (tratto) e Fill (riempimento) determinano come disegnare la forma. Stroke è il contorno della forma. Fill è il contenuto interno della forma.

Esempio online

Questo è un esempio di rettangolo disegnato con tratto blu e riempimento verde (in realtà sono due rettangoli):

Questo è il codice per disegnare questi due riquadri:

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas non supportato
</canvas>
<script>
// 1. Attendere che la pagina sia completamente caricata.
window.onload = function() {
　　　　disegnaEsempi();
}
function disegnaEsempi(){
　　　　// 2. Ottieni il riferimento all'elemento canvas.
　　　　var canvas = document.getElementById("ex1");
　　　// 3. Ottieni il contesto 2D dell'elemento canvas.
　　　　var contesto = canvas.getContext("2d");
　　　　// 4. Disegna l'immagine.
　　　　context.fillStyle = "#009900";
　　　　context.fillRect(10,10, 100,100);
　　　　context.strokeStyle = "#0000ff";
　　　　context.lineWidth = 5;
　　　　context.strokeRect(10,10, 100,100);
}
</script>

Risultato dell'esempio sopra:

Prestare attenzione a come impostare lo stile di contorno e di riempimento rispettivamente utilizzando le proprietà strokeStyle e fillStyle del contesto 2D.

Ancora, prestare attenzione a come impostare la larghezza del contorno del rettangolo blu utilizzando l'attributo lineWidth. Se lineWidth è impostato a 5, significa che la larghezza della linea del rettangolo descritto è di 5.

Infine, prestare attenzione a come specificare la disegno di rettangoli riempiti o contornati con il contesto 2D.