Тени на Canvas в HTML5

HTML5 Canvas shadows автоматически добавляют тень к форме, нарисованной на HTML5 канвасе, shadowOffsetX и shadowOffsetY устанавливают расстояние до формы для рисования тени.

Онлайн пример

Можно автоматически добавить тень к форме, нарисованной на HTML5 канвасе. Вот несколько примеров:

Тень контролируется следующими четырьмя свойствами 2D контекста:

1. shadowOffsetX

2. shadowOffsetY

3. shadowBlur

4. shadowColor

shadowOffsetX и shadowOffsetY устанавливают расстояние до формы для рисования тени. Положительное значение означает, что тень рисуется справа и снизу от формы. Отрицательное значение означает, что тень рисуется слева и сверху от формы.
shadowBlur устанавливает степень размытия тени. Чем больше число, тем более размытой становится форма. Чем меньше число, тем тень становится более резкой. Значение 0 означает, что тень完全没有 размытие.
shadowColor нужно только установить цвет тени.
Это код для примера выше:

<canvas id="ex1" width="500" height="200" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas не поддерживается
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
context.shadowColor = "#666666"; // или использовать rgb(красный, зеленый, синий)
context.fillStyle = "#000000";
context.fillRect(10, 10, 50, 50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5 Canvas Shadow", 10, 120);
</script>