画布特殊形状-动画

Question

我正在完成一个项目，但还有一个步骤要完成。 我想通过画布可视化麦克风输入。 从麦克风获取数据不是问题。 但是我想以一种特殊的方式来可视化它。 （见图片）

我想为wave中的每个元素设置动画。

我的问题不是动画。 我的问题是在CANVAS中创建这些形状。 这是一个形状的示例：

我可以用画布创建圆角形状

    const draw = () => {
        fillRoundedRect(20, 20, 100, 100, 20);
        ctx.fillStyle = "red";
        ctx.fill();
    };

    const fillRoundedRect = (x, y, w, h, r) => {
        ctx.beginPath();
        ctx.moveTo(x+r, y);
        ctx.lineTo(x+w-r, y);
        ctx.quadraticCurveTo(x+w, y, x+w, y+r);
        ctx.lineTo(x+w, y+h-r);
        ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
        ctx.lineTo(x+r, y+h);
        ctx.quadraticCurveTo(x, y+h, x, y+h-r);
        ctx.lineTo(x, y+r);
        ctx.quadraticCurveTo(x, y, x+r, y);
        ctx.fill();
    };

有人可以帮助我创建第二张图片中的形状吗？

在此先感谢大家！

Answer 1

与其尝试制作一个依赖于周围形状的单一形状，并避免数学上出现头痛的高风险，不如使用两个形状，然后使用合成将它们合并。 反正我的建议。

• 使用合成模式source-over （默认）以全高绘制所有条形图
• 使用某种样条线在顶部定义单个形状（我建议使用基数样条线 ）。
• 将合成模式设置为destination-out并使用样条线作为顶部“线”渲染封闭的形状。

例

这应该可以循环工作（请记住为每个框架清除画布），但此处仅显示所需的建筑石材-

var ctx = c.getContext("2d");
var points = [];
var skippy = 0;

// render all bars
ctx.globalCompositeOperation = "source-over"; // not needed here, but in a loop yes!

// produce bars
ctx.beginPath();                             // not needed here, but in a loop yes!
for(var x = 0; x < c.width; x += 30) {
  ctx.rect(x, 0, 16, c.height)

  // OKIDOKI, lets produce the spline using random points (y) as well
  // but not for all, only every second for prettyness... modify to taste
  if (skippy++ % 2 === 0) points.push(x, c.height * Math.random());
}
points.push(c.width, c.height * Math.random());  // one last
ctx.fillStyle = "rgb(198, 198, 198)";
ctx.fill();

// render spline
ctx.beginPath();
ctx.moveTo(0, c.height);                     // bottom left corner
curve(ctx, points);                          // spline
ctx.lineTo(c.width, c.height);               // bottom right corner
ctx.closePath();
ctx.globalCompositeOperation = "destination-out";
ctx.fill();