Фоновые изображения

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

Вместо конкретного цвета для заливки фигур, например, прямоугольников, мы можем использовать изображения. Для этого у контекста элемент canvas имеется функция createPattern(), которая принимает два параметра: изображение, которое будет использоваться в качестве фона, и принцип повторения изображения. Последний параметр играет роль в том случае, если размер изображения у нас меньше, чем размер фигуры на canvas. Этот параметр может принимать следующие значения:

  • repeat: изображение повторяется для заполнения всего пространства фигуры

  • repeat-x: изображение повторяется только по горизонтали

  • repeat-y: изображение повторяется только по вертикали

  • no-repeat: изображение не повторяется

Нарисуем прямоугольник и выведем в нем изображение:

<!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");
const img = new Image();
img.src = "forest.png";

img.onload = function() {			
	const pattern = context.createPattern(img, "repeat");
	context.fillStyle = pattern;
	context.fillRect(10, 10, 200, 200);
	context.strokeRect(10, 10, 200, 200);
};
</script>
</body>
</html>

Чтобы использовать изображение, нам надо создать элемент Image и установить источник изображения - локальный файл или ресурс в сети:

const img = new Image();
img.src = "forest.png";

В данном случае предполагается, что в одной папке с файлом html у меня находится файл изображения forest.png. Однако загрузка изображения может занять некоторое время, особенно если файл изображения берется из сети интернет. Поэтому, чтобы быть уверенными, что изображение уже загрузилось, все действия по его использованию производятся в методе img.onload, который вызывается при завершении загрузки изображения:

img.onload = function() {
				
	const pattern = context.createPattern(img, "repeat");
	context.fillStyle = pattern;
	context.fillRect(10, 10, 200, 200);
	context.strokeRect(10, 10, 200, 200);
};

Метод createPattern() возвращает объект, который устанавливается в качестве стиля заполнения фигуры: context.fillStyle = pattern;. Отрисовка прямоугольника остается той же.

Изображение как фон в canvas в JavaScript

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

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