Javascript和Canvas:绘制和删除线条以创建一个“呼吸”的圆圈

Javascript & Canvas: Draw and delete lines to create a "breathing" circle

本文关键字：一个 呼吸 绘制 Canvas 删除 创建 Javascript      更新时间：2023-09-26

我想创建一个元素，显示一个红色圆圈。一旦用户点击它，她就可以录制她的声音。为了显示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 像素。值得指出的是，有时您不想每一帧都完全清除动画字段。例如，如果你要在开始时在框架上绘制一个半透明的矩形（而不是清除它），那么你最终会得到一个基本的"项目符号时间"样式效果。

这是

正常行为。一旦它在画布上绘制了一些东西，它就会永远存在。你必须像画什么东西一样思考：已经完成的事情无法撤消。幸运的是，您仍然有解决方案：

1）在第一个带有背景色的圆的顶部重新绘制另一个圆圈。这真的不是推荐的方式，但它仍然有用

2） 使用clearRect方法（请参阅如何清除画布以进行重绘）

有许多方法可以清除画布预绘图以创建动画：如何清除画布以进行重绘

我脑海中最简单的：

canvas.width=canvas.width;

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

获得以下信息：

http://jsfiddle.net/dw17jxee/

相关文章：