@camren
Для создания эффекта параллакса на Canvas, можно использовать следующий алгоритм:
@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' на адреса ваших изображений.