gpt4 book ai didi

javascript - 如何链接 P5.js 设置并使用 html Canvas 绘制?

转载 作者:行者123 更新时间:2023-11-28 02:47:22 27 4
gpt4 key购买 nike

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

我有一个带有 div 和 canvas 元素的 HTML 页面(不确定我是否需要这个)我还有两个使用 p5.js 的 javascript 文件,带有设置和绘制功能,我在使用 createCanvas 创建的 Canvas 上绘制我的内容。另一个 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/

最佳答案

来自文档:
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 分配它的父级。

关于javascript - 如何链接 P5.js 设置并使用 html Canvas 绘制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40948611/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com