Question

我想使用p5js with reactjs 但是 如何渲染画布在应用程序组件中？我可以将其复制到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

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

<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

Answer 2

您可以在 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);       
}

将P5js与reactjs一起使用

2 个答案: