CanvasRenderingContext2D: свойство shadowOffsetX

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

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

Свойство CanvasRenderingContext2D.shadowOffsetX API Canvas 2D определяет расстояние, на которое тени будут смещены по горизонтали.

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

Значение

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

Примеры

Горизонтальное смещение тени

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

HTML

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

JavaScript

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

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

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

Результат

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

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

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

	Десктоп					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`shadowOffsetX`	1	12	1.5	≤12.1	2	18	4	≤12.1	1	1.0	4.4

См. также

Интерфейс, определяющий это свойство: CanvasRenderingContext2D
CanvasRenderingContext2D.shadowOffsetY
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/shadowOffsetX