Rotate a full circle with 6 elements on a donut like Element

Question

hey guys i could need some advice cause i'm stuck at the moment i made for clarity 2 screenshots

Basically what i want is if i push one of the buttons (left/right) the whole circle should rotate - the darkred active state should fade out in to grey and the grey field which becomes active should fade in to darkred The words should keep the position until the go upside down - after this they should flip

I took some ideas but i 've no idea how to start. Is css3 + rotation possible, do i need canvas or is there any other possibility around?

How would you guys solve this ?

Thx in advance for your suggestions.

Answer 1

Copy the placeImage function and use it to center and rotate an image on your canvas. Make sure to clear your canvas before doing the rotation.

function placeImage(ctx, img, cx, cy, deg) {
  var to_rad = Math.PI / 180;

  deg *= to_rad;

  ctx.save();
  // move to center
  ctx.translate(cx, cy);
  // rotate about left top edge
  ctx.rotate(deg);
  // center image and place on canvas.
  ctx.translate(-img.width / 2, -img.height / 2);
  ctx.drawImage(img, 0, 0);
  // clear rotations and translations
  ctx.restore();
}

function makeCirc() {
  var to_rad = Math.PI / 180;
  var circ = document.getElementById('circ');
  var circx = circ.getContext('2d');
  circ.width = circ.height = 50;
  circx.beginPath();
  circx.moveTo(45, 25);
  circx.arc(25, 25, 20, 0, 360 * to_rad);
  circx.strokeStyle = "#00FFFF";
  circx.lineWidth = 3;
  circx.stroke();

  circx.fillStyle = '#FF00FF';
  circx.textAlign = 'center';
  circx.font = "20px Arial";
  circx.fillText('^', 25, 25);

  circx.beginPath();
  circx.lineWidth = 2;
  circx.strokeStyle = "#FF00FF";
  circx.moveTo(25, 40);
  circx.lineTo(25, 13);
  circx.stroke();
  return circ;
}

(function main() {
  var can = document.getElementById('can');
  var ctx = can.getContext('2d');
  var w = can.width = 200;
  var h = can.height = 150;
  var to_rad = Math.PI / 180;

  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, w, h);

  var circ = makeCirc();

  var deg = 0;
  var dstep = 360 / 60;
  var dmax = 360;

  setInterval(function() {
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, w, h);
    placeImage(ctx, circ, w / 2, h / 2, deg);
    deg += dstep;
    deg %= dmax;
  }, 1000);
})();

<canvas id="can"></canvas>
<canvas id="circ"></canvas>