Основное использование requestAnimationFrame для анимации

Question

Я создаю этот код, в котором есть два прямоугольника: красный - это фиксированный квадрат. Голубой прямоугольник должен вращаться над красным. Угол поворота должен быть переменным с использованием requestAnimationFrame. Итак, я хочу, чтобы angle варьировалось от 0 до 360. Как я могу это сделать?

Это мой код:

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext('2d')

const width = canvas.width
const height = canvas.height

const backgroundColor = '#c35033'
const overlayColor = '#bcddda'

fillStyle = backgroundColor

fillRectangle(ctx, backgroundColor, 0, 0, width, height)

const angle = Math.PI
fillSemiTransparentOverlay(angle, width, overlayColor)
// window.requestAnimationFrame(step)

function fillSemiTransparentOverlay(angle, width, overlayColor) {
  ctx.save()
  ctx.translate(width / 2, width / 2)
  ctx.rotate(angle)
  ctx.translate(-width / 2, -width / 2)
  ctx.fillStyle = overlayColor
  ctx.fillRect(-width * (3 / 2), -width / 2, width * 2, width * 2)
  ctx.restore()
}

function fillRectangle(context, color, x, y, width, height) {
  context.fillStyle = color
  context.fillRect(x, y, width, height)
}

<canvas id="canvas" width="500" height="500" />

Answer 1

Я добавил в ваш код функцию step: вам нужно очистить холст.Вы можете сделать это с помощью clearRect.В этом примере вместо clearRect я перекрашиваю фон Далее вам нужно увеличить угол: angle+= .01; Для другой скорости используйте другой шаг.Наконец вы снова рисуете оверлей.

Надеюсь, это поможет.

function step(){
  //use requestAnimationFrame with the step function as a callback
  window.requestAnimationFrame(step);
  //fill the background
  fillRectangle(ctx, backgroundColor, 0, 0, width, height);
  //increase the angle
  angle+= .01;
  //paint the overlay
  fillSemiTransparentOverlay(angle, width, overlayColor)
}

//call the function step()
step()

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext('2d')

const width = canvas.width
const height = canvas.height

const backgroundColor = '#c35033'
const overlayColor = '#bcddda'

fillStyle = backgroundColor

fillRectangle(ctx, backgroundColor, 0, 0, width, height)

let angle = Math.PI
fillSemiTransparentOverlay(angle, width, overlayColor)


///////////////////////////
function step(){
//use requestAnimationFrame with the step function as a callback
  window.requestAnimationFrame(step);
  //fill the background
  fillRectangle(ctx, backgroundColor, 0, 0, width, height);
  //increase the angle
  angle+= .01;
  //paint the overlay
  fillSemiTransparentOverlay(angle, width, overlayColor)
}
step()
/////////////////////////

function fillSemiTransparentOverlay(angle, width, overlayColor) {
  ctx.save()
  ctx.translate(width / 2, width / 2)
  ctx.rotate(angle)
  ctx.translate(-width / 2, -width / 2)
  ctx.fillStyle = overlayColor
  ctx.fillRect(-width * (3 / 2), -width / 2, width * 2, width * 2)
  ctx.restore()
}

function fillRectangle(context, color, x, y, width, height) {
  context.fillStyle = color
  context.fillRect(x, y, width, height)
}

<canvas id="canvas" width="500" height="500" />