HTML5 Ombres du canvas

HTML5 Les ombres du canvas peuvent être mises en œuvre dans HTML5Les formes dessinées sur le canvas sont automatiquement ajoutées des ombres, shadowOffsetX et shadowOffsetY définissent la distance à laquelle l'ombre doit être dessinée par rapport à la forme.

Exemple en ligne

Il est possible de mettre en œuvre dans HTML5Les formes dessinées sur le canvas sont automatiquement ajoutées des ombres. Voici quelques exemples:

Les ombres sont définies par les quatre2Les propriétés de D Context contrôlent:

1. shadowOffsetX

2. shadowOffsetY

3. shadowBlur

4. shadowColor

shadowOffsetX et shadowOffsetY définissent la distance à laquelle l'ombre doit être dessinée par rapport à la forme. Une valeur positive indique que l'ombre est dessinée à droite de la forme (x) et en dessous (y). Une valeur négative indique que l'ombre est dessinée à gauche de la forme (x) et au-dessus (y).
shadowBlur définit l'ampleur du flou de l'ombre. Plus ce nombre est élevé, plus la forme est floue. Plus ce nombre est bas, plus l'ombre devient aiguë. Une valeur de 0 signifie que l'ombre n'est pas floue du tout.
shadowColor nécessite uniquement la couleur de l'ombre.
Voici le code de l'exemple ci-dessus:

<canvas id="ex1" width="500" height="200" style="border:　1px solide #cccccc;">
　　　　HTML5　Canvas non pris en charge
</canvas>
<script>
var canvas = document.getElementById("ex1;
var context = canvas.getContext("2d");
context.shadowOffsetX =　10;
context.shadowOffsetY =　10;
context.shadowBlur =　4;
context.shadowColor = "#666666";//ou utilisez rgb(couleur, vert, bleu)
context.fillStyle = "#000000";
context.fillRect(10,10,　50,　50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5　Canvas Shadow",　10,120);
</script>