p5js素描

WordPress的页面

我试图插入创建画布div元素到手动创建的页面模板在WordPress里面：p5js素描

模板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页面的工作原理是一样的。

所以我尝试了不同的方法来解决它，但没有任何工作对我来说。

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

来源

2016-12-13 massprogressive

有两种方法可以做到这一点。一个是把你的素描写成工厂，就像这样：

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() ?>

来源

2016-12-13 16:54:16 nrlakin

我像你描述做什么，但获得了指定div内的大小为100x100的默认画布。

– massprogressive

@massprogressive：我的工厂功能出现错误，现在已更正。我也能够用你的原始技术来工作;我已经添加了一些我的答案。我相信您的原始问题是您的

回答

相关问题