如何链接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画布绘制？

回答

相关问题