将移动的音频同步条对齐到画布内的圆圈
Align moving audio synced bars to circle inside canvas
我正在尝试对齐与音乐同步的酒吧(因此移动)到画布上的圆圈。我已经有了音乐同步,并准备好了一个圆。
现在我正试图旋转它们,所以它看起来不错,但是,因为这是我第一次尝试与画布,我失败得很惨…
下面是代码要点。
如果我用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()
方法。它们保存当前的转换并在之后恢复它,因此两者之间的转换不会影响下一次绘制。
但是因为你想让每个条旋转一个固定的量,我建议你这样做,并为每个条设置一个固定的量,而不是增加它,让旋转加起来
相关文章:
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 当文本不断变化时,如何避免在按钮内移动文本
- 如何使用触摸事件在画布内移动 obj
- 循环内移动阵列
- 在 android 中单击按钮时在网络视图中显示的网页部分内移动
- 通过单击方向按钮在容器内移动图像
- 使用 CSS 在容器内移动元素
- HTML5画布赢得'不允许我在画布内移动对象
- 在幻灯片内移动光滑的导航箭头
- 如何使用fabrics.js使画布背景可拖动并在画布内移动
- 缩放和旋转织物后,在画布内移动对象
- 使用箭头在窗口内移动Div
- 不能在iframe内移动滚动条
- onMouseOut在锚标记内移动时频繁触发
- 我可以检测鼠标当前是否在画布绘制函数内移动
- 力“Tab"在元素内移动- Jquery/Javascript
- 剑道塔布内的剑道格子有无限的高度
- 在画布边界限制内移动对象
- 在六边形网格内移动零件
- 可以在幻灯片容器内移动Orbit子弹