JS скрипт анимация плавное вращения окружности на определенный угол

Question

Есть код:

let x = 600; //х центра круга
let y = 300; //у центра круга
let r = 200;
let l = 80;
let a = Math.acos(r / (2 * r) + l / (2 * r));
let rotateAngle = 60 * Math.PI / 180;
let animFlag;
let colours = ["rgba(30, 214, 13, .5)", "rgba(13, 207, 214, .5)", "rgba(240, 233, 101, .5)", "rgba(222, 40, 210, .5)", "rgba(240, 149, 74, .5)", "rgba(156, 144, 134, .5)"];
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

function init() {
  let canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    let ctx = canvas.getContext("2d");
    ctx.lineWidth = 3.0;
    ctx.fillStyle = "rgba(0, 0, 0, .1)";
    ctx.fillRect(600, 0, 600, 600);
    ctx.fillStyle = "green";
    ctx.font = "25px verdana";
    ctx.fillText("Rotate +", 650, 80);
    ctx.fillStyle = "rgba(13, 207, 214, .5)";
    ctx.fillRect(400, 0, 200, 600);
    ctx.fillStyle = "green";
    ctx.font = "25px verdana";
    ctx.fillText("Rotate -", 450, 80);
    drawWheel();
  }
}

function drawWheel() {
  let canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    for (i = 0; i < 6; i++) {
      ctx.fillStyle = colours[i];
      //draw 1 out part of circle 
      ctx.strokeStyle = "red"; //color of circl's board 
      ctx.translate(x, y);
      ctx.rotate(rotateAngle);
      ctx.translate(-x, -y);
      ctx.beginPath();
      ctx.arc(x, y, r, -a, a, false); //arc(centerX, centerY, radius, startingAngle, endingAngle);
      ctx.stroke();
      ctx.closePath();
      ctx.fill(); //end draw 1 out part of circle 
      //draw 2 inside part of circle 

      ctx.fillStyle = colours[i];
      ctx.strokeStyle = "blue"
      ctx.beginPath();
      ctx.arc(x + r + l, y, r, Math.PI - a, Math.PI + a);
      ctx.stroke();
      ctx.closePath();
      ctx.fill(); //end draw 2 inside part of circle 
    }
  }
}

function rotateWheel() {
  let canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    let ctx = canvas.getContext("2d");
    ctx.translate(x, y);
    ctx.rotate(rotateAngle);
    ctx.translate(-x, -y);
    drawWheel();
  }
}

function mouseClick(event) {
  let x = event.clientX;
  let y = event.clientY;
  if ((x > 550) && (x < 850) && (y > 0) && (y < 600))
    animFlag = rotateWheel();
}
window.addEventListener("click", mouseClick, false);

<body onload="init()">
<canvas id="canvas" width="850" height="800" style="border:1px solid">
    Нужно шагать в ногу со временем!<br />
 Обновите, пожалуйста, браузер.
</canvas>

Вопрос: Как получить плавное вращение на 60 градусов по клику? Понимаю что в ctx.rotate надо анимировать rotateAngle?

БЛОГ НА HUSL

JS скрипт анимация плавное вращения окружности на определенный угол

Ответы (0 шт):