javascript - WordPress 页面内的 p5js 草图

Question

我正在尝试将创建的 Canvas 插入到 WordPress 中手动创建的页面模板的 div 元素中:

模板自定义.php

<?php get_header('custom') ?>

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

<?php get_footer() ?>

草图.js

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

我已经通过 p5js 引用文献编写了它。 Canvas 显示在页面上，但默认情况下位于页面的底部。只需一个 html 页面即可实现相同的效果。

所以我尝试了几种不同的方法来解决这个问题，但没有任何效果对我有用。

目标是将 Canvas 插入到指定位置。

Answer 1

有两种方法可以做到这一点。一种是将你的草图写成工厂，如下所示:

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'));

这就是我在第一个答案中的方式；你遇到的问题是由于我的拼写错误造成的——我没有在前面加上“p”。在创建 Canvas 之前。所有 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() ?>