center canvas p5js

概述

center canvas p5js 是一个使用 p5.js 库实现的程序，它可以帮助你在浏览器中居中显示一个 p5.js 画布。 p5.js 是一个强大的 JavaScript 库，它可以让你轻松创建交互式图形、动画和音频效果。

使用方法

首先，你需要在你的 HTML 文件中引入 p5.js 库。你可以通过以下方式将其添加到你的 HTML 页面的头部：

<script src="https://cdn.jsdelivr.net/npm/p5"></script>

接下来，你可以将以下代码片段添加到你的 JavaScript 文件中：

// 创建一个全局变量来存储画布
let canvas;

function setup() {
  // 创建一个画布，并将其保存到全局变量 `canvas` 里
  canvas = createCanvas(400, 400);
  
  // 将画布居中显示
  centerCanvas();
}

function centerCanvas() {
  // 获取浏览器窗口的宽度和高度
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
  
  // 计算将画布居中显示所需的偏移量
  const x = (windowWidth - width) / 2;
  const y = (windowHeight - height) / 2;
  
  // 设置画布的位置
  canvas.position(x, y);
}

function draw() {
  // 在画布上绘制你的图形或动画
  background(220);
  ellipse(width/2, height/2, 50, 50);
}

最后，在你的 HTML 文件中添加一个 <div> 元素来容纳画布：

<div id="canvas-container"></div>

在你的 JavaScript 文件中，将 centerCanvas 函数中的 canvas.position(x, y); 修改为 canvas.parent('canvas-container');。

运行程序

为了运行程序，你可以在浏览器中打开你的 HTML 文件，或者使用一个本地服务器来运行它。然后，你将看到一个居中显示的 400x400 像素的画布，并在其中绘制一个圆形。

自定义画布大小

如果你想要改变画布的大小，只需修改 createCanvas 函数中的参数即可。例如：

canvas = createCanvas(800, 600);

这将创建一个 800x600 像素的画布。

结论

通过使用 center canvas p5js，你可以轻松地在浏览器中居中显示一个 p5.js 画布。这对于创建交互式图形和动画非常有用。开始使用它，并让你的创意变为现实吧！