CanvasRenderingContext2D: свойство shadowBlur
Базовая Широко поддерживается
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
Свойство CanvasRenderingContext2D.shadowBlur API Canvas 2D определяет степень размытия тени. Значение по умолчанию — 0 (без размытия).
Примечание: Тени рисуются только в том случае, если свойство shadowColor установлено в непрозрачное значение. Также одно из свойств shadowBlur, shadowOffsetX или shadowOffsetY должно быть отличным от нуля.
Значение
Неотрицательное число с плавающей точкой, определяющее степень размытия тени, где 0 соответствует отсутствию размытия, а бо́льшие значения соответствуют всё более сильному размытию. Это значение не соответствует количеству пикселей и не зависит от текущей матрицы преобразования. Значение по умолчанию — 0. Отрицательные, Infinity и NaN значения игнорируются.
Примеры
Добавление тени к фигуре
В этом примере к прямоугольнику добавляется размытая тень. Свойство shadowColor задаёт цвет тени, а shadowBlur — степень размытия.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "red";
ctx.shadowBlur = 15;
// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);
Результат
Спецификации
| Спецификация |
|---|
| HTML # dom-context-2d-shadowblur-dev |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
shadowBlur |
1 | 12 | 1.5 | ≤12.1 | 2 | 18 | 4 | ≤12.1 | 1 | 1.0 | 4.4 |
Примечания для WebKit/Blink
В браузерах на основе WebKit и Blink помимо этого свойства реализован нестандартный и устаревший метод ctx.setShadow().
setShadow(width, height, blur, color, alpha); setShadow(width, height, blur, graylevel, alpha); setShadow(width, height, blur, r, g, b, a); setShadow(width, height, blur, c, m, y, k, a);
См. также
- Интерфейс, определяющий это свойство:
CanvasRenderingContext2D CanvasRenderingContext2D.shadowColor
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur
