wordpress页面内的p5js草图

Question

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

模板-custom.php

<?php get_header('custom') ?>

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

<?php get_footer() ?>

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

这是我在第一个答案中的方式；您遇到的问题是由于我的打字错误——我没有在 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() ?>

wordpress页面内的p5js草图

p5js sketch inside wordpress page

javascript

processing