如何将JavaScript创建的p5.js canvas画布居中显示在屏幕中央

算力阿峰

2026-10-11

解决方案

1. 修改CSS样式

通过flex布局让动态生成的canvas元素自动在视口内水平垂直居中：

body {
  margin: 0;
  overflow: hidden;
  background: rgba(31,36,67,1);
  /* 新增以下内容 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

2. 修正JS窗口适配逻辑

原windowResized函数存在语法错误、缩放逻辑无效的问题，修改为按原图比例自动计算canvas尺寸：

function windowResized () {
  const imgRatio = img.width / img.height;
  let canvasWidth, canvasHeight;
  // 保持图片比例，高度铺满窗口，宽度按比例计算
  canvasHeight = windowHeight;
  canvasWidth = canvasHeight * imgRatio;
  resizeCanvas(floor(canvasWidth), floor(canvasHeight));
  
  noiseSeed(random(100));
  if (window['goToStep' + 6]) {
    window['goToStep' + 6]();
  }
  draw();
}

如果需要保证canvas始终不超出窗口边界（宽度过窄时自动缩小高度），可以用以下逻辑替换上面的尺寸计算部分：

const imgRatio = img.width / img.height;
let canvasWidth, canvasHeight;
if (windowWidth / windowHeight > imgRatio) {
  // 窗口更宽，高度铺满窗口，宽度按比例计算
  canvasHeight = windowHeight;
  canvasWidth = canvasHeight * imgRatio;
} else {
  // 窗口更窄，宽度铺满窗口，高度按比例计算
  canvasWidth = windowWidth;
  canvasHeight = canvasWidth / imgRatio;
}
resizeCanvas(floor(canvasWidth), floor(canvasHeight));