Есть код:
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?