p5.jsで作ったcanvasをbody内の好きな場所に表示する方法

p5.jsで作ったプログラムをhtmlページに表示させようとすると、左上にしか表示させることができなかった。それを自分の好きな場所に表示させる方法。

まず任意の変数(ここではcanvas)を定義する。
function setup() 内をこのように記述する。
”P5Canvas”は他の文字でも良い。

var canvas;
function setup() {
  canvas = createCanvas(400, 400);
  canvas.parent("P5Canvas");
}

html内では以下のように記述

<body>
<div id="P5Canvas"></div>
</body>

これでp5.jsで作成したプログラムを、html内の任意の場所に移動、表示することができる。

p5.js
スポンサーリンク
のんびりブログ

コメント

タイトルとURLをコピーしました