Javascript wordpress页面内的p5js草图

我正在尝试将创建的画布插入到wordpress中手动创建的页面模板的div元素中：

template-custom.php

我是通过p5js引用编写的。 画布显示在页面上，但默认情况下显示在页面顶部。只有一个html页面的工作原理是一样的

所以我尝试了两种不同的方法来解决这个问题，但是没有一种方法对我有效

---

目标是将画布插入到指定的位置。

有两种方法。一种是以工厂的形式编写草图，如下所示：

var sketch = function(p) {
    p.setup = function () {
        var WIDTH = 500;
        var HEIGHT = 500;
        p.createCanvas(WIDTH, HEIGHT);
    }
    /* The rest of your sketch goes here. */
    p.draw = function() {
        /* draw code here */
    }
};
new p5(sketch, document.getElementById('createdCanvas'));

这是我第一次回答时的方式；您遇到的问题是由于我的输入错误造成的--在createCanvas之前，我没有在“p”前面加上前缀。如果使用此方法，所有p5全局函数都需要此“p”

一个更整洁的方法更接近你最初的方法。我想你拿到了，除了你在加载草图——在图片渲染之前。试试这个：

sketch.js：

function setup() {
    var WIDTH = 500;
    var HEIGHT = 500;
    var myCanvas = createCanvas(WIDTH, HEIGHT);
    myCanvas.parent('createdCanvas');
}

无论哪种方式，模板都应该是相同的——脚本标记位于下面，包含：

<?php get_header('custom') ?>

<div id='createdCanvas' width='600px' height='600px'>

</div>
<script src="sketch.js"></script>
<?php get_footer() ?>

---

有两种方法可以做到这一点。一种是以工厂的形式编写草图，如下所示：

var sketch = function(p) {
    p.setup = function () {
        var WIDTH = 500;
        var HEIGHT = 500;
        p.createCanvas(WIDTH, HEIGHT);
    }
    /* The rest of your sketch goes here. */
    p.draw = function() {
        /* draw code here */
    }
};
new p5(sketch, document.getElementById('createdCanvas'));

这是我第一次回答时的方式；您遇到的问题是由于我的输入错误造成的--在createCanvas之前，我没有在“p”前面加上前缀。如果使用此方法，所有p5全局函数都需要此“p”

一个更整洁的方法更接近你最初的方法。我想你拿到了，除了你在加载草图——在图片渲染之前。试试这个：

sketch.js：

function setup() {
    var WIDTH = 500;
    var HEIGHT = 500;
    var myCanvas = createCanvas(WIDTH, HEIGHT);
    myCanvas.parent('createdCanvas');
}

无论哪种方式，模板都应该是相同的——脚本标记位于下面，包含：

<?php get_header('custom') ?>

<div id='createdCanvas' width='600px' height='600px'>

</div>
<script src="sketch.js"></script>
<?php get_footer() ?>

我正在按照您描述的方式进行操作，但在指定的分区内获得了大小为100x100的默认画布。@massprogressive:my factory函数中有一个错误，现已更正。我也能用你原来的技术让它工作；我的回答中增加了一点。我相信您最初的问题是您标签的位置。解决方案对我有效。但您有一个错误：删除

draw

函数名后的括号，我会将其标记为已解决。我按照您描述的操作，但在指定的div中获得了大小为100x100的默认画布。@massprogressive:我的工厂函数中有一个错误，现已更正。我也能用你原来的技术让它工作；我的回答中增加了一点。我相信您最初的问题是您标签的位置。解决方案对我有效。但您有一个错误：删除

draw

函数名后的括号，我会将其标记为已解决。