p5js怎么导入html,如何链接P5.js设置和绘制与HTML画布？

我确信这是一件非常简单的事情，但我被困在这里。

情况如下：

我有一个带有div和canvas元素的HTML页面(不确定我是否需要这个)

我还有两个使用p5.js的javascript文件，其中包含设置和绘制功能，我在使用createCanvas创建的画布上绘制内容。

另一个js文件包含一个对象。

问题是 - 我可以在HTML页面上显示动画，但不能在div和/或画布中显示。

HTML：

Fractals

body {

padding: 0;

margin: 0;

}

JS草图：

var tree = [];

var x;

var y;

function setup() {

createCanvas(333,197);

var a = createVector(width / 2, height);

var b = createVector(width / 2, height - 50);

var root = new Branch(a, b);

tree[0] = root;

for (var t = 0; t < 5; t++) {

for (var i = tree.length-1; i >= 0; i--) {

if (!tree[i].finished){

tree.push(tree[i].branchA());

tree.push(tree[i].branchB());

tree.push(tree[i].branchC());

}

tree[i].finished = true;

}

}

}

function draw() {

background(51);

x = mouseX;

y = mouseY;

for (var i = 0; i < tree.length; i++) {

tree[i].show();

tree[i].wind(x, y, tree[i].end.x, tree[i].end.y);

}

}

JS分支对象：

function Branch(begin, end) {

this.begin = begin;

this.end = end;

this.finished = false;

this.origx = this.end.x;

this.origy = this.end.y;

this.show = function() {

stroke(255);

line(this.begin.x, this.begin.y, this.end.x, this.end.y);

}

this.branchA = function() {

var dir = p5.Vector.sub(this.end, this.begin);

dir.rotate(19.2);

dir.mult(0.67);

var newEnd = p5.Vector.add(this.end, dir);

var v = new Branch(this.end, newEnd);

return v;

}

this.branchB = function() {

var dir = p5.Vector.sub(this.end, this.begin);

dir.rotate(0);

dir.mult(0.67);

var newEnd = p5.Vector.add(this.end, dir);

var v = new Branch(this.end, newEnd);

return v;

}

this.branchC = function() {

var dir = p5.Vector.sub(this.end, this.begin);

dir.rotate(-19.2);

dir.mult(0.67);

var newEnd = p5.Vector.add(this.end, dir);

var v = new Branch(this.end, newEnd);

return v;

}

this.wind = function(mox,moy,treex,treey) {

var d = dist(mox,moy,treex,treey);

if (d < 20) {

this.end.x += random(-0.3, 0.3);

this.end.y += random(-0.3, 0.3);

}else{

this.end.x = this.origx;

this.end.y = this.origy;

}

}

}