p5.js执行preload后页面元素左移的问题排查与解决

问题原因 #

p5.js 默认会自动在页面中创建一个 <canvas> 元素——哪怕你的 setup() 函数是空的。当 preload() 执行完毕后，p5.js 完成初始化流程，会把这个默认的 canvas 追加到 <body> 里。

你的 <body> 使用了 display: flex 布局，默认的 flex-direction: row 会让新增的 canvas 和你的 #music-player 容器并排排列。原本 body 里只有播放器一个元素，能完美居中；现在多了一个 canvas 元素，两个元素按空间分配水平位置，直接导致播放器容器向左偏移。

解决方法 #

方法1：禁用默认canvas创建（推荐） #

通过 p5.js 的配置项直接禁止自动生成 canvas，只使用其音频功能。修改你的脚本部分，改用手动实例化 p5 并设置 noCanvas: true：

new p5(p => {
    const path = new URLSearchParams(window.location.search).get('path');
    const encodedPath = encodeURIComponent(path).replace(/%20/g, "+");
    const apiUrl = './audio';

    let audio;

    p.preload = function() {
        audio = p.loadSound(`${apiUrl}?path=${encodedPath}`, finishLoading, errorLoading);
    }

    function errorLoading(e) {
        console.error("Error Loading Audio: " + e);
    }

    function finishLoading() {
        if (audio.isLoaded()) {
            playButton.style.display = 'inline-block';
            document.getElementById('p5_loading').style.display = 'none';
        }
    }

    window.playAudio = function() {
        if (audio.isLoaded() && !audio.isPlaying()) {
            playButton.style.display = 'none';
            pauseButton.style.display = 'inline-block';
            audio.play();
        }
    }

    window.pauseAudio = function() {
        if (audio.isPlaying()) {
            playButton.style.display = 'inline-block';
            pauseButton.style.display = 'none';
            audio.pause();
        }
    }
}, undefined, { noCanvas: true });

方法2：在setup中禁用canvas #

如果不想改初始化方式，直接在 setup() 里调用 noCanvas() 函数，阻止p5生成canvas：

function setup() {
    noCanvas();
}

方法3：隐藏自动生成的canvas #

在CSS中添加规则，直接隐藏p5生成的canvas元素：

body canvas {
    display: none;
}

以上三种方法都能确保 <body> 里只有你的播放器容器，flex布局的居中效果会一直保持。

内容的提问来源于stack exchange，提问作者nullptr