wordpress 页面内的 p5js 草图 [英] p5js sketch inside wordpress page

问题描述

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

模板-custom.php

sketch.js

函数设置() {无功宽度 = 500;变量高度 = 500;var myCanvas = createCanvas(WIDTH, HEIGHT);myCanvas.parent('createdCanvas');}

我是通过 p5js 参考编写的.画布显示在页面上，但默认情况下在页面的 .只有一个 html 页面的工作方式相同.

所以我尝试了几种不同的方法来解决它，但对我来说没有任何效果.

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

解决方案

有两种方法可以做到这一点.一种是像工厂一样写你的草图，就像这样:

var sketch = function(p) {p.setup = 函数 () {无功宽度 = 500;变量高度 = 500;p.createCanvas(WIDTH, HEIGHT);}/* 草图的其余部分放在这里.*/p.draw = function() {/* 在这里绘制代码 */}};new p5(sketch, document.getElementById('createdCanvas'));

这是我在第一个回答中的方式；您遇到的问题是由于我的拼写错误——我没有在p"前面加上.在创建画布之前.所有 p5 全局函数都需要这个p".如果你使用这种方法.

更简洁的方式更接近您最初的方式.我认为您拥有它，除了您在包含渲染之前加载您的草图.试试这个:

sketch.js:

函数设置() {无功宽度 = 500;变量高度 = 500;var myCanvas = createCanvas(WIDTH, HEIGHT);myCanvas.parent('createdCanvas');}

无论哪种方式，模板都应该相同——在包含以下内容的脚本标记:

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

I'm trying to insert created canvas to the div element to the manually created page template in wordpress:

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

I've wrote it by the p5js reference. The canvas displayed on the page, but by default at the of the page. Just one single html page work the same.

So I've tried different couple of different ways to solve it, but nothing is working for me.

The goal is to insert canvas to specified place.

解决方案

There are two ways to do this. One is to write your sketch as a factory, like so:

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

This was the way I had it in my first answer; the issue you had was due to a typo on my part--I didn't prepend the "p." before createCanvas. All p5 global functions will need this "p." if you use this method.

A tidier way of doing it is closer to the way you did it initially. I think you had it, except that you were loading your sketch in -- before the containing had rendered. Try this:

sketch.js:

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

The template should be the same either way--with the script tag below the containing :

<?php get_header('custom') ?>

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

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

这篇关于wordpress 页面内的 p5js 草图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！