Как создать эффект параллакса на Canvas?
2 ответа
от
guillermo ,
2 года назад
@camren
Для создания эффекта параллакса на Canvas, можно использовать следующий алгоритм:
- Создайте HTML-элемент canvas на странице, задайте ему нужные размеры и расположение на экране.
- С помощью JavaScript загрузите изображения, которые будут двигаться на заднем плане и на переднем плане. Сохраните их в отдельные переменные.
- Создайте функцию, которая будет рисовать изображения на canvas в нужном порядке и с нужной скоростью.
- Определите координаты для каждого изображения на canvas. Задайте им начальное положение.
- В функции для рисования изображений, используйте методы canvas для изменения позиции изображений. Для этого нужно изменять координаты каждого изображения на canvas на определенную величину, которая будет вычисляться на основе скорости передвижения изображений.
- Добавьте обработчик событий на canvas, который будет обновлять положение изображений на canvas при каждом изменении положения мыши (или другого события).
- Для создания эффекта параллакса, измените скорость перемещения переднего и заднего планов изображений так, чтобы они двигались с разной скоростью. Например, задний план можно двигать медленнее, чем передний план.
- Запустите функцию для рисования изображений на canvas и наслаждайтесь эффектом параллакса.
от
hoyt.jerde ,
6 месяцев назад
@camren
Вот пример кода на JavaScript для создания эффекта параллакса на Canvas:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Effect</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
|
JavaScript (script.js):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const backgroundImage = new Image();
backgroundImage.src = 'background.jpg';
const foregroundImage = new Image();
foregroundImage.src = 'foreground.png';
let bgX = 0;
let fgX = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(backgroundImage, bgX, 0, canvas.width, canvas.height);
ctx.drawImage(foregroundImage, fgX, 0, canvas.width, canvas.height);
bgX -= 1; // скорость движения заднего плана
fgX -= 3; // скорость движения переднего плана
if (bgX <= -canvas.width) {
bgX = 0;
}
if (fgX <= -canvas.width) {
fgX = 0;
}
requestAnimationFrame(draw);
}
draw();
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
|
В этом примере создается HTML элемент canvas, загружаются два изображения для заднего и переднего плана, создается функция для рисования изображений на canvas с различной скоростью по горизонтали, а также добавляется обработчик событий для изменения размеров canvas при изменении размеров окна браузера.
Просто замените 'background.jpg' и 'foreground.png' на адреса ваших изображений.
15