Question

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

模板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参考编写的。画布显示在页面上，但默认情况下显示在页面上。只需一个html页面即可。

所以我尝试了不同的方法来解决它，但没有什么对我有用。

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

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”。在createCanvas之前。所有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() ?>

word5页面内的p5js草图

1 个答案: