html - 将 p5 元素添加到 html div

Question

我如何将 p5 元素添加到 html div？例如，我有一个绘制正弦波的函数，如下所示：

            let theta = 0.0; // Start angle at 0
            let amplitude = this.circlesArray[i].radius / 2; // Height of wave
            let period = this.circlesArray[i].rotationSpeed * 500; // How many pixels before the wave repeats
            let dx = (TWO_PI / period) * this.xspacing;

            theta += 0.02;

            // For every x value, calculate a y value with sine function
            let x = theta;
            for (let i = 0; i < this.yvalues.length; i++) {
                this.yvalues[i] = sin(x) * amplitude;
                x += dx;
            }

            stroke(255);
            beginShape();

            for (let x = 0; x < this.yvalues.length; x++) {
                curveVertex(x * this.xspacing / 10, height / 2 + this.yvalues[x])
            }
            endShape();
        }

beginShape();这使用 p5 、curveVertex();和函数绘制正弦波endShape();，它们共同构成一条表示正弦波的连续线。问题是，我想把这些正弦波放在一个 html div 中，这样它们就可以用 flex-box 而不是绝对位置动态间隔。有谁知道我应该怎么做？

标签： htmlcssp5.js

Answer 1

默认情况下 p5.js 绘制到单个<canvas>元素。您可以通过获取返回的方法并调用其方法来控制该<canvas>元素在 DOM 中的位置：p5.RenderercreateCanvasparent

function setup() {
  let c = createCanvas(200, 200);
  c.parent('id_of_div');
}

还有一个名为p5.js-svg的 p5.js 库，它可以从一组绘图指令生成 SVG 文件，这在这种情况下也可能很有用。

注意：如果你想在 DOM 的不同点创建多个 p5.js 图形，那么你需要使用“实例模式”。有关更多信息，请参阅此答案。