Добавление теней

Последнее обновление: 06.11.2023

Элемент canvas поддерживает добавление теней к нарисованным объектам. Для создания теней у контекста canvas применяются следующие свойства:

  • shadowOffsetX: горизонтальное смещение в пикселях справа (или слева при отрицательном значении)

  • shadowOffsetY: вертикальное смещение в пикселях снизу (или сверху при отрицательном значении)

  • shadowBlur: число пикселей ля установки размыти тени

  • shadowColor: цвет тени

Например, установим тень для прямоугольника:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillStyle = "#3498db";
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = "#999";
context.fillRect(10, 10, 200, 200);
</script>
</body>
</html>

В данном случае устанавливаем тень для прямоугольника:

Отрисовка теней на canvas в JavaScript

Подобным образом можно применять тени и к другим фигурам, тексту и изображениям:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font="16px Verdana";
context.fillStyle = "#222";
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 3;
context.shadowColor = "#AAA";
context.fillText("Тени на Canvas", 80, 30);
	
const img = new Image();
img.src = "forest.png";
img.onload = function() {
	
	context.shadowOffsetX = 8;
	context.shadowOffsetY = 8;
	context.shadowBlur = 5;
	context.shadowColor = "#333";
	context.drawImage(img, 50, 50, 192, 128);
};
</script>
</body>
</html>
Тени на canvas в JavaScript

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850