Question

我想创建一个显示红色圆圈的元素。一旦用户点击它，她就可以录制她的声音。为了显示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();

任何想法 - 或针对此用例的完全不同的策略？

Answer 1

Canvas默认会透支。对于动画，您需要在每帧开始时清理画布。在绘图功能开始时使用以下内容：

analyserContext.clearRect(0,0,200,200);

假设您的画布宽200像素。值得指出的是，有时您不希望每帧完全清除动画场。例如，如果您要在开始时在框架上绘制半透明矩形（而不是清除它），那么您最终会得到基本的“项目符号时间”样式效果。

Answer 2

这是正常行为。一旦它画在画布上，就会永远存在。如果你正在画一些东西，你必须要思考：已经完成的工作无法撤消。幸运的是，你仍然有解决方案：

1）用背景颜色在第一个上面重绘另一个圆圈。这不是推荐的方式，但它仍然有用

2）使用clearRect方法（参见How to clear the canvas for redrawing）

Answer 3

有许多方法可以清除画布预绘图以创建动画： How to clear the canvas for redrawing

在我看来最简单：

canvas.width=canvas.width;

虽然可以在区域或整个画布上同样使用clearRect（实际上更快并且不会重置整个画布，如果这是关于变换等的问题！）。

获取以下内容：

http://jsfiddle.net/dw17jxee/

Javascript＆amp;画布：绘制和删除线条以创建“呼吸”圆圈

3 个答案: