Как добавить тени на объекты на Canvas?
Как добавить тени на объекты на Canvas?
1 ответ
от
verla ,
2 года назад
@kieran.bradtke
Для добавления теней на объекты на Canvas можно использовать свойство shadow у контекста рисования.
Синтаксис:
1 2 3 4 |
context.shadowOffsetX = offsetX; context.shadowOffsetY = offsetY; context.shadowBlur = blur; context.shadowColor = color; |
где:
- shadowOffsetX - смещение тени по оси X (относительно объекта);
- shadowOffsetY - смещение тени по оси Y (относительно объекта);
- shadowBlur - степень размытия тени;
- shadowColor - цвет тени.
Пример использования:
1 2 3 4 5 6 7 8 9 10 11 12 |
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// устанавливаем свойства тени
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 5;
context.shadowColor = 'rgba(0, 0, 0, 0.5)';
// рисуем прямоугольник с тенью
context.fillStyle = 'red';
context.fillRect(50, 50, 200, 100);
|
В этом примере нарисуется красный прямоугольник с тенью, смещенной на 5 пикселей по оси X и Y, с радиусом размытия 5 пикселей и полупрозрачным чёрным цветом.