元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【p5.js】canvasタグを任意の場所に表示させる

p5.jsで生成されるcanvasタグを任意の場所に表示させる方法について書きます。デフォルトのままでは都合が悪いので、コードを少し変更します。まずは、デフォルトの挿入位置を確認します。その後、対応コードを記述します。

canvasタグのデフォルトの挿入位置

p5.jsのデフォルトでは、bodyの閉じタグの直前にcanvasタグが挿入される。

...

<main><canvas></canvas></main>
</body>
</html>

任意の場所に表示したいので、コードを変更する。

canvasを任意の場所に表示

HTMLのid属性が書かれている場所に、canvasを表示するようにする。

<div id="result"></div>
//id属性で指定した要素を取得する
let result = document.getElementById('result');

function setup(){
  let canvas = createCanvas(200, 200);
  canvas.parent(result);  //canvasを指定した要素の子要素にする

  //以下、続きの処理
  ...
}

parent()メソッドは、p5.jsが持っているメソッド。詳しくは、リファレンスのDOMの項目にある「p5.Element」を参照。

表示例

マウスの動きに合わせて、円が動く。

まとめ

canvasを任意の場所に表示する方法は、以下の通りです。

  • HTMLのタグにid属性を付ける
  • id属性の場所に、canvasを表示するようにコードを変更する
    • parent()で、canvasを指定した要素の子要素にする

今までは、任意の場所にcanvasを表示する方法が分からなかったので、デモを画像で表示していました。今後は、canvasでデモを表示できます。