如何将p5绘制的图形元素添加到HTML div中实现弹性布局动态排布

前置说明 #

p5默认会将生成的canvas元素直接插入到body节点下，要让canvas受flex布局控制，只需要将canvas挂载到你指定的div容器下即可，核心用到p5内置的parent()方法。

实现步骤 #

步骤1：编写HTML结构，定义flex布局容器 #

<!-- 父flex容器，控制子元素间距和排布 -->
<div style="display: flex; gap: 20px; padding: 20px; width: 100vw; box-sizing: border-box;">
  <!-- 每个子div对应一个正弦波画布的容器 -->
  <div id="wave1" style="flex:1; height: 200px; border: 1px solid #f0f0f0;"></div>
  <div id="wave2" style="flex:1; height: 200px; border: 1px solid #f0f0f0;"></div>
  <div id="wave3" style="flex:1; height: 200px; border: 1px solid #f0f0f0;"></div>
</div>
<!-- 引入p5依赖 -->
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>

步骤2：改造你的正弦波代码，将画布挂载到对应div #

这里推荐用p5实例模式，方便同时生成多个独立的波形画布：

// 封装波形生成函数，支持传入挂载容器id和波形参数
function generateWave(containerId, radius, rotationSpeed) {
  const waveSketch = function(p) {
    let theta = 0.0
    let xspacing = 16
    let yvalues
    let amplitude = radius / 2
    let period = rotationSpeed * 500
    let dx

    p.setup = function() {
      // 画布尺寸和父容器保持一致
      const parentDom = document.getElementById(containerId)
      const canvasWidth = parentDom.offsetWidth
      const canvasHeight = parentDom.offsetHeight
      // 创建画布
      const canvas = p.createCanvas(canvasWidth, canvasHeight)
      // 核心：将画布挂载到指定div
      canvas.parent(containerId)

      yvalues = new Array(p.floor(canvasWidth / xspacing))
      dx = (p.TWO_PI / period) * xspacing
    }

    p.draw = function() {
      p.background(0)
      theta += 0.02
      // 计算正弦波点位
      let x = theta
      for (let i = 0; i < yvalues.length; i++) {
        yvalues[i] = p.sin(x) * amplitude
        x += dx
      }
      // 绘制波形
      p.stroke(255)
      p.beginShape()
      for (let x = 0; x < yvalues.length; x++) {
        p.curveVertex(x * xspacing / 10, p.height / 2 + yvalues[x])
      }
      p.endShape()
    }

    // 可选：窗口尺寸变化时自适应容器大小
    p.windowResized = function() {
      const parentDom = document.getElementById(containerId)
      p.resizeCanvas(parentDom.offsetWidth, parentDom.offsetHeight)
      yvalues = new Array(p.floor(p.width / xspacing))
      dx = (p.TWO_PI / period) * xspacing
    }
  }
  new p5(waveSketch)
}

// 页面加载完成后初始化所有波形
window.addEventListener('load', () => {
  generateWave('wave1', 100, 2)
  generateWave('wave2', 150, 3)
  generateWave('wave3', 80, 1.5)
})

关键说明 #

• 挂载完成后canvas会作为div的子元素存在，完全继承flex布局的间距、伸缩比例等规则，不需要额外写定位样式
• 如果你只需要单个波形，不需要用实例模式，直接在全局p5的setup函数中调用canvas.parent('你的容器id')即可
• 画布宽高可以直接读取父容器的尺寸，实现完全自适应容器大小

内容的提问来源于stack exchange，提问作者Josh