如何将带有图像的Processing 5草图放入HTML页面？

Question

我正在建立一个网页，该网页将有3个不同的p5草图的空间。问题是当我尝试将p5草图加载到index.html页面中时，它无法正确加载或无法正常工作。但是，当我尝试使用不包含图像的p5草图进行相同的操作时，效果很好。

我尝试使用<script src= script src="sketch.js"></script>，并且此方法适用于不包含图像的p5草图，但是不适用于包含图像的任何草图。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script;
<script src="sketch.js"></script>

Answer 1

您不能像使用HTML一样仅使用JavaScript访问本地文件。您需要使用文件API，如此处所述：https://www.html5rocks.com/en/tutorials/file/dndfiles/ 来源：Local file access with javascript

关于“在页面上放置草图”问题。我认为最好的方法已在本文中详细介绍：https://github.com/processing/p5.js/wiki/Positioning-your-canvas#relocating-the-canvas