将移动的音频同步条对齐到画布内的圆圈

Align moving audio synced bars to circle inside canvas

本文关键字:布内 移动 音频 同步 对齐      更新时间:2023-09-26

我正在尝试对齐与音乐同步的酒吧(因此移动)到画布上的圆圈。我已经有了音乐同步,并准备好了一个圆。

现在我正试图旋转它们,所以它看起来不错,但是,因为这是我第一次尝试与画布,我失败得很惨…

下面是代码要点。

如果我用c.rotate(bar[i].rot);运行它,它会被打乱…

你能帮我一下吗?

第一件事:
-清除每个帧上的整个画布。它太复杂了,而且在性能方面,不值得费心只删除所需的内容。

第二:


Canvas的RenderingContext2D是一个上下文,这意味着它是一个状态机,每次你对它执行更改时都会修改它的状态。
这个变化可能是变换:平移,缩放,旋转。
或者影响渲染:globalAlpha, globalCompositeOperation, shadows。
或者是一个strokeStyle/fillStyle/font的变化

当你改变上下文的状态时,最好先保存它,然后再恢复它:

context.save();
 context.translate(.., ..);
 context.beginPath();
 context.move();
context.restore();

这样,调用后的上下文就像之前一样"干净",没有任何问题。

对于你的代码,你是相当接近的,例如这段代码是相当不错的(使用随机值):

function animate() {
  requestAnimationFrame(animate);
  // clear whole screen
  context.clearRect(0,0,600,600);  
  context.fillStyle = '#000';
  // rotating step
  var angle = 2*Math.PI/cnt ; 
  // save context
  context.save();
  context.translate(300,300);
  for (var i=0; i<cnt; i++) {
    context.rotate(angle);
    var val = values[i];    
    context.fillRect(-10, 100, 20, 80*val );
    values[i]+=(Math.random()-0.5)/20;
   }
  // restore now we're done.
  context.restore();       
} 

你可以在这里试试:http://jsbin.com/haxeqaza/1/edit?js,输出

不要犹豫,注释//animate()并启动animate2(),使用2个小技巧。

: -)

所有的转换加起来,除非您使用上下文.save().restore()方法。它们保存当前的转换并在之后恢复它,因此两者之间的转换不会影响下一次绘制。

但是因为你想让每个条旋转一个固定的量,我建议你这样做,并为每个条设置一个固定的量,而不是增加它,让旋转加起来