p5js эскиз внутри WordPress страницы

Question

Я пытаюсь вставить созданный холст на сОн элемента в созданном вручную шаблон страницы в 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() ?> 

Последний вопрос

• 1.
• 2.
• 3.
• 4.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.