p5js素描

Question

WordPress的頁面

我試圖插入創建畫布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() ?> 

最新問題

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

 相關問題

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