如何将p5.js画布创建代码转换为原生HTML Canvas代码

核心API映射关系 #

• 初始化逻辑：把setup()的内容放到DOM加载完成的回调中，createCanvas(300,300)替换为创建canvas元素、设置尺寸、插入页面，同时获取绘图上下文ctx
• 渲染循环：用requestAnimationFrame模拟p5的draw()持续调用逻辑
• 绘图API一一对应：
  • background(50) → 先将fillStyle设为rgb(50,50,50)，再调用fillRect(0,0,画布宽,画布高)覆盖整个画布
  • stroke(0) → 给ctx.strokeStyle赋值为rgb(0,0,0)
  • fill(10*r,10*c,255) → 给ctx.fillStyle赋值为对应rgb颜色字符串
  • rect(x,y,w,h) → 调用ctx.beginPath()新建路径，ctx.rect(x,y,w,h)定义矩形路径，依次执行ctx.fill()填充、ctx.stroke()描边

注：你提供的原p5代码中循环变量r、c没有参与矩形坐标计算，所有矩形会重叠在同一位置，下面的实现已经修正了坐标逻辑，可正常渲染10*10彩色网格。

完整实现代码 #

无需引入p5.js依赖，直接运行即可：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>原生Canvas实现p5效果</title>
</head>
<body>
  <script>
    // 画布配置
    const canvasWidth = 300
    const canvasHeight = 300
    let ctx

    // 对应p5的setup()初始化逻辑
    function init() {
      // 创建画布，等价于createCanvas
      const canvas = document.createElement('canvas')
      canvas.width = canvasWidth
      canvas.height = canvasHeight
      document.body.appendChild(canvas)
      // 获取2D绘图上下文
      ctx = canvas.getContext('2d')
      // 静态内容只需调用一次render即可，需要动态效果再启用下方渲染循环
      render()
      // renderLoop()
    }

    // 对应p5的draw()渲染逻辑
    function render() {
      // 等价于background(50)
      ctx.fillStyle = 'rgb(50,50,50)'
      ctx.fillRect(0, 0, canvasWidth, canvasHeight)

      for (let r = 0; r < 10; r++) {
        for (let c = 0; c < 10; c++) {
          // 等价于stroke(0)
          ctx.strokeStyle = '#000'
          // 等价于fill(10*r,10*c,255)
          ctx.fillStyle = `rgb(${10*r}, ${10*c}, 255)`
          // 定义矩形并绘制，已修正坐标实现网格布局
          ctx.beginPath()
          ctx.rect(r*30, c*30, 30, 30)
          ctx.fill()
          ctx.stroke()
        }
      }
    }

    // 渲染循环，模拟p5自动调用draw的机制，动态场景才需要
    function renderLoop() {
      render()
      requestAnimationFrame(renderLoop)
    }

    // 页面加载完成后启动初始化
    window.addEventListener('DOMContentLoaded', init)
  </script>
</body>
</html>

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