javascript - 在 Canvas 上围绕圆周旋转矩形

Question

我正在尝试使用 JavaScript 和 HTML canvas 为我正在处理的一个小项目创建一个小的圆形“均衡器”效果，除了一件小事外，它工作得很好。它只是一系列随时间移动到 mp3 的矩形条 - 没有什么特别花哨的，但目前所有的条都指向一个方向(即 0 弧度，或 90 度)。

我希望圆圈边缘周围的每个矩形都指向远离中心点的方向，而不是指向右侧。我有 360 条，所以自然地，每个都应该比前一个多旋转 1 度。

我认为做 angle = i*Math.PI/180 会解决这个问题，但我用旋转函数做什么似乎并不重要 - 它们总是指向奇怪而美妙的方向，并被翻译离他们所在的地方一百万英里。我不明白为什么。谁能看出我哪里出错了？

我的框架代码，供引用，如下:

function frames() {

  // Clear the canvas and get the mp3 array
  window.webkitRequestAnimationFrame(frames);
  musicArray = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(musicArray);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  bars = 360;


  for (var i = 0; i < bars; i++) {

    // Find the rectangle's position on circle edge
    distance = 100;
    var angle = i * ((Math.PI * 2) / bars);
    var x = Math.cos(angle) * distance + (canvas.width / 2);
    var y = Math.sin(angle) * distance + (canvas.height / 2);
    barWidth = 5;
    barHeight = (musicArray[i] / 4);

    // Fill with a blue-green gradient
    var grd = ctx.createLinearGradient(x, 0, x + 40, 0);
    grd.addColorStop(0, "#00CCFF");
    grd.addColorStop(1, "#00FF7F");
    ctx.fillStyle = grd;

    // Rotate the rectangle according to position
    // ctx.rotate(i*Math.PI/180); - DOESN'T WORK

    // Draw the rectangle
    ctx.fillRect(x, y, barHeight, barWidth);

  }

Answer 1

为清楚起见，我删除了您的部分代码。我正在按您的预期使用旋转。我还使用 barHeight = (Math.random()* 50); 而不是你的 (musicArray[i]/4); 因为我想展示一些东西.

另外，我已将您的条数更改为 180。很可能您不会有 360 条，而是 32 或 64 或 128 或 256。 . .现在您可以将 bare 的数字更改为这些数字之一以查看结果。

我在 Canvas 原点周围绘制所有内容，并在中心平移上下文。

希望对你有帮助。

const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 400;
let ch = canvas.height = 400;


let bars = 180;
let r = 100;

ctx.translate(cw / 2, ch / 2)

for (var i = 0; i < 360; i += (360 / bars)) {

  // Find the rectangle's position on circle edge

  var angle = i * ((Math.PI * 2) / bars);
  //var x = Math.cos(angle)*r+(canvas.width/2);
  //var y = Math.sin(angle)*r+(canvas.height/2);
  barWidth = 2 * Math.PI * r / bars;
  barHeight = (Math.random() * 50);


  ctx.fillStyle = "green";

  // Rotate the rectangle according to position
  // ctx.rotate(i*Math.PI/180); - DOESN'T WORK

  // Draw the rectangle
  ctx.save();
  ctx.rotate(i * Math.PI / 180);

  ctx.fillRect(r, -barWidth / 2, barHeight, barWidth);

  //ctx.fillRect(r ,0, barHeight, barWidth);

  ctx.restore();
}

canvas {
  border: 1px solid
}

<canvas id="c"></canvas>