Question

我正在尝试将与音乐同步的条（因此移动）对齐到画布上的圆圈。我已经将音乐同步并准备好了一个圆圈。

现在我正在尝试旋转它们以使它看起来不错，但是因为这是我第一次尝试使用画布我失败了......

以下是代码Gist。

如果我使用c.rotate(bar[i].rot);运行它，它会变得全乱......

请你帮我解决这个问题。

非常感谢。

Answer 1

除非您使用上下文.save()和.restore()方法，否则所有转换都会相加。他们保存当前的转换并在之后恢复，因此转换不会影响下一次平局。

但是由于你想要将每个条形图旋转一个固定的数量，我建议你做到这一点并设置每个条形图的旋转所以固定的数量而不是增加它并让旋转加起来。

Answer 2

第一件事：
- 清除每个框架上的整个画布。这太复杂了，性能方面不值得擦除只需要的东西。

第二：
Canvas的RenderingContext2D是一个上下文，这意味着它是一个状态机，每次对它进行更改时都会修改它的状态。
这种变化可能是一种变换：翻译，缩放，旋转或影响渲染：globalAlpha，globalCompositeOperation，阴影或者是strokeStyle / fillStyle / font change。

每次更改上下文的状态时，最好先将其保存，然后在以下情况下恢复：

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,output

毫不犹豫地评论// animate（）并使用2个漂亮的小技巧来启动animate2（）。

： - ）

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

2 个答案: