Ombra Canvas HTML5

Le ombre nel canvas HTML5 possono essere aggiunte automaticamente alle forme disegnate su un canvas HTML5, shadowOffsetX e shadowOffsetY impostano la distanza da disegnare l'ombra rispetto alla forma.

Esempio online

È possibile aggiungere automaticamente ombre alle forme disegnate su un canvas HTML5. Ecco alcuni esempi:

L'ombra è controllata da quattro proprietà 2D Context di seguito:

1. shadowOffsetX

2. shadowOffsetY

3. shadowBlur

4. shadowColor

shadowOffsetX e shadowOffsetY impostano la distanza da disegnare l'ombra rispetto alla forma. Un valore positivo indica che l'ombra viene disegnata a destra e in basso rispetto alla forma. Un valore negativo indica che l'ombra viene disegnata a sinistra e in alto rispetto alla forma.
shadowBlur imposta l'entità di sfocatura dell'ombra. Più alto è il numero, più sfocata è la forma. Più basso è il numero, più acuta diventa l'ombra. Un valore di 0 indica che l'ombra non è sfocata.
shadowColor deve solo impostare il colore dell'ombra.
Questo è il codice dell'esempio sopra:

<canvas id="ex1" width="500" height="200" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas non supportato
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
context.shadowColor = "#666666"; // O utilizzare rgb(rosso, verde, blu)
context.fillStyle = "#000000";
context.fillRect(10, 10, 50, 50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("Ombra Canvas HTML5", 10, 120);
</script>