HTML5 Sombra no Canvas

HTML5 Sombra no Canvas pode ser adicionada em HTML5Formas desenhadas no canvas automaticamente adicionam sombra, shadowOffsetX e shadowOffsetY definem a distância para desenhar a sombra em relação à forma.

Exemplo online

Pode-se adicionar em HTML5Formas desenhadas no canvas automaticamente adicionam sombra. Aqui estão alguns exemplos:

A sombra é controlada por seguintes quatro2A propriedade D Context controla:

1. shadowOffsetX

2. shadowOffsetY

3. shadowBlur

4. shadowColor

shadowOffsetX e shadowOffsetY definem a distância para desenhar a sombra em relação à forma. O valor positivo significa que a sombra é desenhada ao lado direito e embaixo da forma. O valor negativo significa que a sombra é desenhada ao lado esquerdo e em cima da forma.
shadowBlur define o grau de desfoque da sombra. O número maior, a forma mais desfocada. O número menor, a sombra fica mais nítida. O valor 0 significa que a sombra não está desfocada.
shadowColor apenas precisa definir a cor da sombra.
Este é o código do exemplo acima:

<canvas id="ex1" largura="500" altura="200" estilo="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas não suportado
</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 usar rgb（vermelho，verde，azul）
context.fillStyle = "#000000";
context.fillRect(10,10,　50,　50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5　Sombra do Canvas",　10,120);
</script>