@francis_schuster
Для рисования анимированного облака на Canvas вы можете использовать следующий код:
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 |
Анимированное облако const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); let x = 50; let y = 50; let speed = 1; function drawCloud() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.fillStyle = "#fff"; ctx.arc(x, y, 40, 0, Math.PI * 2); ctx.arc(x + 25, y - 25, 40, 0, Math.PI * 2); ctx.arc(x + 75, y - 25, 40, 0, Math.PI * 2); ctx.arc(x + 100, y, 40, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); x += speed; if (x > canvas.width + 100) { x = -100; } requestAnimationFrame(drawCloud); } drawCloud(); |
Этот код использует функцию requestAnimationFrame()
для обновления холста с каждым кадром анимации. Облако рисуется с помощью команды ctx.arc()
, то есть через наложение кружков. Обновление положения облака осуществляется в функции drawCloud()
путем изменения переменной x
и проверки ее значения для перемещения облака влево или вправо.
Вы можете изменять параметры облака, например, цвет, радиус кругов и скорость перемещения, так чтобы получить нужный вам результат.