我想创建一个显示红色圆圈的元素。一旦用户点击它，她就可以记录自己的声音。为了显示LIVE模式，我想根据呼入频率使圆圈“呼吸”。
我正在尝试使用<canvas>元素。这意味着它会根据变量arcrad创建一个越来越大的圆。但是，线条绘制正确，但之后不会消失。我尝试应用.clip()，但无法正常工作...
if (arcrad <= 10) arcrad = 10;
analyserContext.beginPath();
analyserContext.arc(100,120,arcrad,0,2*Math.PI);
analyserContext.closePath();
analyserContext.lineWidth = 2;
analyserContext.strokeStyle = 'red';
analyserContext.stroke();
有什么想法-或针对此用例的完全不同的策略？
最佳答案
默认情况下，画布会透支。对于动画，您需要在每一帧开始时清洁画布。在绘图功能开始时使用以下内容：
analyserContext.clearRect(0,0,200,200);
假设您的画布是200像素高。值得指出的是，有时候您不想在每一帧都完全清除动画字段。例如，如果您要在一开始就在框架上绘制一个半透明的矩形（而不是清除它），那么最终将获得基本的“子弹时间”样式效果。