帆布特殊形状 - 动画

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（默认）
绘制全高度的所有条形图
• 使用某种样条线在顶部定义单个形状（我建议使用cardinal spline）。
• 将合成模式设置为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();