如何解决在Flexbox中使用p5.js实例化无法正常工作
我正在一个项目中,我在下拉选项卡的单个flexbox中显示多个p5.js项目。我已经到了要画2张画布并排成一排的阶段。我可以在设置中编辑画布的大小,更改颜色等。我的问题是使p.draw函数起作用。设置后我需要输入代码,但是当我尝试添加绘图功能时,画布消失了。谁能帮我解决这个问题?
这是我代码的当前迭代:
<div id="p5-2" class="flex-item">
<script>
// script 2
let sketch2 = function(p) {
p.setup = function() {
p.createCanvas(100,100);
p.background("orange");
}
//The p.draw function should in theory be positioned here
};
let node2 = document.createElement('div');
window.document.getElementById('p5-2').appendChild(node2);
new p5(sketch2,node2);
// script 3
</script>
</div>
<div id="p5-3" class="flex-item">
<script>
var sketch3 = function(p) {
p.setup = function() {
p.createCanvas(100,100);
p.background("green");
}
//The p.draw function should in theory be positioned here
};
let node3 = document.createElement('div');
window.document.getElementById('p5-3').appendChild(node3);
new p5(sketch3,node3);
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。