我有一个小的p5js脚本，我想将其合并到Meteor项目中。我将p5js本身放在client / compatibility / p5.min.js中，并将我的p5js脚本放在client / p5js / sketch1.js中。
这是我的脚本：
var sketch1 = function (s) {
s.setup = function () {
s.createCanvas(100, 100);
s.background(100);
};
s.draw = function () {
}
};
new p5(sketch1, "sketch1");
它的确注入到html中，但没有注入到id =“ sketch1”的div下。当我打开控制台时，这是html：
<body>
<canvas id="defaultCanvas0" class="" width="300" height="300" style="width: 100px; height: 100px;"></canvas>
<div id="sketch1"></div>
</body>
任何想法为什么会发生这种情况，以及我该如何解决？通常的行为是将画布以id =“ sketch1”注入div内。
最佳答案
我找到了解决问题的方法。非常简单的解决方案。为了使p5js自身注入，必须渲染DOM。在我的情况下，不会渲染DOM，因此不会将画布以id“ sketch1”注入div。
解决方案是使用Meteor的onRendered方法：
Template.templateName.onRendered(function() {
new p5(sketch1, "sketch1");
})
这样可以确保在创建草图之前渲染DOM，然后将其注入ID为“ sketch1”的DOM元素中。