CanvasRenderingContext2D: свойство shadowOffsetY

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Свойство CanvasRenderingContext2D.shadowOffsetY API Canvas 2D определяет вертикальное смещение тени.

Примечание: Тени отображаются только в том случае, если свойство shadowColor установлено в непрозрачное значение. Одно из свойств shadowBlur, shadowOffsetX или shadowOffsetY должно быть ненулевым.

Значение

Число с плавающей точкой, определяющее вертикальное смещение тени. Положительные значения смещают тень вниз, а отрицательные — вверх. Значение по умолчанию — 0 (без вертикального смещения). Значения Infinity и NaN игнорируются.

Примеры

Перемещение тени по вертикали

В этом примере к прямоугольнику добавляется размытая тень. Свойство shadowColor задаёт её цвет, свойство shadowOffsetY смещает её на 25 единиц вниз, а shadowBlur задаёт уровень размытия в 10 единиц.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetY = 25;
ctx.shadowBlur = 10;

// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 80);

Результат

Спецификации

Спецификация
HTML # dom-context-2d-shadowoffsety-dev

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`shadowOffsetY`	1	12	1.5	≤12.1	2	18	4	≤12.1	1	1.0	4.4

См. также

Интерфейс, определяющий это свойство: CanvasRenderingContext2D
CanvasRenderingContext2D.shadowOffsetX
CanvasRenderingContext2D.shadowColor
CanvasRenderingContext2D.shadowBlur

© 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/shadowOffsetY