p5js语言和html语言,使用p5.js连接HTML输入页面
时间: 2023-10-10 16:08:40 浏览: 40
要在 HTML 页面中使用 p5.js,首先需要在 HTML 文件中引入 p5.js 库。可以通过以下方式引入:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
```
然后,在 HTML 页面中创建一个 canvas 元素,用于绘制 p5.js 图形。可以使用以下代码创建 canvas:
```html
<canvas id="myCanvas"></canvas>
```
接下来,在 JavaScript 文件中创建一个 p5.js 实例,并将其连接到 canvas 元素上。可以使用以下代码:
```javascript
function setup() {
var canvas = createCanvas(400, 400);
canvas.parent('myCanvas');
}
function draw() {
background(220);
// 在这里绘制 p5.js 图形
}
```
在上面的代码中,`setup()` 函数用于创建 p5.js 实例,并将其连接到 canvas 元素上。`draw()` 函数用于在 canvas 上绘制图形。`createCanvas()` 函数用于创建一个指定大小的 canvas。
最后,在 HTML 文件中引入 JavaScript 文件,并在其中调用 `setup()` 函数即可。例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>p5.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
```