将 P5js 与 reactjs 一起使用

Question

我想使用p5js with reactjs但是如何可以 render a canvas 在应用程序组件中？我可以将其复制到 index.html 文件中吗？

<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
    <style> body {padding: 0; margin: 0;} </style>
<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>

Answer 1

您在 setup() 中创建您的 canvas（由 p5.js 执行一次）并在中渲染（绘制）您的 canvas draw()（p5.js 以默认 60fps 执行此函数）

html:

<script language="javascript" type="text/javascript" src="../p5.min.js"></script>
<script language="javascript" type="text/javascript" src="scetch.js"></script>

sketch.js:

function setup() 
{
    createCanvas(400, 400);
}

function draw() // main loop
{
    background(0);
    circle(50, 50, 25);       
}

Answer 2

是的，您可以将其复制到 index.js 文件中，只需确保所有 p5js 库代码都在 public 文件夹中，然后将此

<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>

进入index.html

将 P5js 与 reactjs 一起使用

Using P5js with reactjs

javascript

reactjs

p5.js