p5jsスケッチ

Question

私はワードプレスで手動で作成されたページテンプレートにdiv要素に作成されたキャンバスを挿入しようとしている：

テンプレート-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リファレンスで書きました。 キャンバスはページに表示されますが、ページのデフォルトで表示されます。ちょうど1つのhtmlページが同じように動作します。

私はそれを解決するためにさまざまな方法を試しましたが、何も私のために働いていません。

目的は、指定された場所にキャンバスを挿入することです。

Answer 1

これを行うには2通りの方法があります。 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.

 関連する問題

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