如何鏈接P5.js設置並使用html畫布繪製？

我相信這是一件非常簡單的事情，但我被困在這裏。這裏的情況是：如何鏈接P5.js設置並使用html畫布繪製？

我有一個div和canvas元素（不知道我是否需要這個）的HTML頁面我也有使用p5.js與安裝兩個JavaScript文件，繪製funtions，我畫我的我用createCanvas創建的畫布上的內容。其他js文件包含一個對象。問題是 - 我可以將動畫顯示在HTML頁面上，但不能在div和/或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/

來源

2016-12-03 Austris Otersons-Andersons

從文檔：
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帆布的一個實例，然後通過DOM ID分配其父。

來源

2016-12-03 14:31:10 ThisClark

正是我在尋找的，非常感謝！ –

不錯的代碼，順便說一句。我寫了一個樣本：http://codepen.io/anon/pen/VmQzYW。鼠標懸停時，樹枝上有微妙的波浪。 – ThisClark

如何鏈接P5.js設置並使用html畫布繪製？

回答

相關問題