在像Element这样的甜甜圈上旋转一个带有6个元素的整圆

Question

嘿伙计们，我可能需要一些建议，因为我现在卡住了 我为清晰起见2截图

基本上我想要的是如果我按下其中一个按钮（左/右），整个圆圈应该旋转 - 黑暗的活动状态应淡出为灰色，变为活动的灰色区域应淡入黑暗 这些词应该保持位置直到颠倒 - 在此之后他们应该翻转

我采取了一些想法，但我不知道如何开始。 css3 +旋转是否可行，我需要画布还是还有其他可能吗？

你们怎么解决这个问题？

提前获取您的建议。

Answer 1

复制placeImage函数并使用它在画布上居中并旋转图像。确保在轮换之前清除画布。

＆＃13;

＆＃13;

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);
})();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;