HTML5 shadows de Canvas

HTML5 shadows en Canvas se pueden añadir en HTML5formas dibujadas en el lienzo se añaden automáticamente sombras, shadowOffsetX y shadowOffsetY configuran la distancia a la que se debe dibujar la sombra desde el contorno de la forma.

ejemplo en línea

Se puede añadir en HTML5formas dibujadas en el lienzo se añaden automáticamente sombras. Aquí hay algunos ejemplos:

La sombra se crea mediante los siguientes cuatro2Atributo Context controla:

1. shadowOffsetX

2. shadowOffsetY

3. shadowBlur

4. shadowColor

shadowOffsetX y shadowOffsetY configuran la distancia a la que se debe dibujar la sombra desde el contorno de la forma. Un valor positivo indica que la sombra se dibuja a la derecha de la forma en el eje x y debajo en el eje y. Un valor negativo indica que la sombra se dibuja a la izquierda de la forma en el eje x y arriba en el eje y.
shadowBlur configura el grado de desvanecimiento de la sombra. El número más alto, la forma más borrosa. El número más bajo, la sombra se vuelve más aguda. Un valor de 0 indica que la sombra no está borrosa.
shadowColor solo se debe configurar el color de la sombra.
Este es el código del ejemplo anterior:

<canvas　id="ex1"　width="500"　height="200"　style="border:　1px　solid　#cccccc;">
　　　　HTML5　Canvas　not　supported
</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 usar rgb（rojo，verde，azul）
context.fillStyle　=　"#000000";
context.fillRect(10,10,　50,　50);
context.fillStyle　=　"#000066";
context.font　=　"30px　Arial";
context.fillText("HTML5　Canvas　Sombra",　10,120);
</script>