使用P5js与Reactjs

Question

我希望能在React中使用p5js，但我该如何在应用程序组件中渲染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>

- Gianmarco

---

你尝试时发生了什么？ - Kevin Workman

https://discuss.reactjs.org/t/using-react-with-p5-js/5565/2 - Agney

我觉得没有什么是我做不到的。 - Gianmarco

请尽量具体说明。您是否收到了错误消息？运行此代码时发生了什么？您能否发布一个 [mcve] ？ - Kevin Workman

Answer 1

你需要在 setup() 函数中创建画布（p5.js 仅执行一次），并在 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);       
}

- Fredrik

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>

into index.html

- olawalejuwonm