畫布特殊形狀-動畫

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();