如何 link P5.js 设置和绘制 html canvas？

Question

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

我有一个包含 div 和 canvas 元素的 HTML 页面（不确定我是否需要这个）我还有两个 javascript 文件使用 p5.js 设置和绘制功能，我在其中绘制我的内容 canvas 我用 createCanvas 创建的。另一个 js 文件包含一个对象。问题是 - 我可以让动画显示在 HTML 页面上，但不能显示在 div and/or canvas.

中

图像更清晰： HTML and JS comunication

HTML:

<html>
<head>
  <meta charset="utf-8">
  <title>Fractals</title>
  <script language="javascript" type="text/javascript" src="libs/p5.js"></script>
  <script language="javascript" src="libs/p5.dom.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <script language="javascript" type="text/javascript" src="branch.js"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
</head>
<body>
  <div>
    <canvas id="fractal" height="197" width="333" style=" width:333;height:197;"></canvas>
  </div>
</body>
</html>

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;

        }
    }
}

P5 库：https://p5js.org/download/

Answer 1

来自文档：
https://github.com/processing/p5.js/wiki/Positioning-your-canvas

// sketch.js
function setup() {
    var canvas = createCanvas(100, 100);

    // Move the canvas so it's inside our <div id="sketch-holder">.
    canvas.parent('sketch-holder');

    background(255, 0, 200);
}

使用 P5 创建一个 canvas 实例，然后通过 dom id 分配其父实例。

如何 link P5.js 设置和绘制 html canvas？

How to link P5.js setup and draw with html canvas?

javascript

html

canvas

p5.js