在innerHTML完全加载后加载processing.js草图？

Question

我的processing.js草图有一个size()调用，它依赖于窗口被加载时抓取div的大小。50%的时间，草图在CSS启动之前加载，因此草图没有正确的大小。我认为最好的应对方式是在window.onload函数中进行加载，但canvas似乎不喜欢被innerHTML调用。如何在需要时将带有processing草图的canvas放入div中？

- prismspecs

Answer 1

问题不在于canvas无法工作，而是Processing.js未寻找DOM插入以加载sketches；它仅在DOM内容加载时进行一般的sketches加载。由于你希望在此之后注入你的sketch，你可以通过触发重新解析（通过调用Processing.reload()来实现，这将重置所有内容，因此如果页面上还有其他不应被重置的sketches，请勿使用）或者你可以调用

var sourceList = ['file1.pde','file2.pde','...',...];
var canvas = document.querySelector("#mycanvas");
Processing.loadSketchFromSources(canvas, sourceList);

当安全注入页面时，专门用于一个草图。

- Mike 'Pomax' Kamermans