@josie
Можно использовать следующий код:
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 |
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); let sunX = canvas.width / 2; let sunY = canvas.height / 2; let sunRadius = 50; let sunGradient = ctx.createRadialGradient(sunX, sunY, 0, sunX, sunY, sunRadius); sunGradient.addColorStop(0, '#ffce00'); sunGradient.addColorStop(1, '#ff8a00'); function drawSun() { ctx.beginPath(); ctx.arc(sunX, sunY, sunRadius, 0, 2 * Math.PI); ctx.fillStyle = sunGradient; ctx.fill(); } let angle = 0; function animateSun() { angle += 0.01; sunX = canvas.width / 2 + Math.cos(angle) * 200; sunY = canvas.height / 2 + Math.sin(angle) * 200; drawSun(); } setInterval(animateSun, 10); |
В данном коде мы создаем элемент canvas и контекст для рисования. Затем мы задаем начальные значения для координат и радиуса солнца, а также создаем градиент, который будет заполнять контур солнца.
В функции drawSun
мы рисуем круг солнца с помощью метода arc
и заполняем его градиентом.
Функция animateSun
производит анимацию солнца, изменяя координаты солнца в зависимости от угла поворота. Угол увеличивается на каждом шаге анимации, и при достижении полного круга он сбрасывается к нулю.
Наконец, мы используем setInterval
для вызова функции animateSun
каждые 10 миллисекунд и создаем эффект анимации.