创建Canvas矩阵：设备尺寸画布切换实现方案咨询

嘿，很高兴你能尝试这个创意！先给你明确说：Canvas确实是实现这个需求的合适方案——尤其是如果你之后要在这些画布上做绘图、动画这类交互操作的话。不过如果只是展示静态内容，用普通的div也能达到类似效果，但既然你想用到Canvas，那我们就聚焦这个方向来聊。

• 布局基础：给所有Canvas设置绝对定位，宽高设为100vw/100vh（对应设备宽高）。初始状态下只让第一个Canvas留在视口内（top:0; left:0），其他的通过设置top或left值移到屏幕外（比如左边的设left: -100vw，右边left: 100vw，上边top: -100vh，下边top: 100vh）。
• 切换逻辑：给按钮绑定点击事件，点击时把当前显示的Canvas移到对应屏幕外位置，再把目标Canvas移回视口内。
• 状态管理：用一个变量记录当前显示的Canvas索引，方便后续切换时快速定位。

下面是一个最小实现的例子，你可以直接复制运行，直观看到效果：

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            overflow: hidden; /* 隐藏屏幕外元素的滚动条 */
        }
        canvas {
            position: absolute;
            width: 100vw;
            height: 100vh;
            transition: all 0.3s ease; /* 加上过渡动画，切换更丝滑 */
        }
        .controls {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100; /* 确保按钮在Canvas上方 */
        }
        button {
            padding: 8px 16px;
            margin: 0 5px;
            cursor: pointer;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="controls">
        <button data-target="0">上</button>
        <button data-target="1">右</button>
        <button data-target="2">下</button>
        <button data-target="3">左</button>
    </div>

    <canvas id="canvas0"></canvas>
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>
    <canvas id="canvas3"></canvas>

    <script>
        const canvases = document.querySelectorAll('canvas');
        const buttons = document.querySelectorAll('button');
        let currentIndex = 0;

        // 初始化Canvas的位置和内容
        canvases.forEach((canvas, index) => {
            // 修正Canvas绘图缓冲区尺寸，避免模糊
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            const ctx = canvas.getContext('2d');
            // 给每个Canvas画不同背景和文字，方便区分
            ctx.fillStyle = `hsl(${index * 90}, 70%, 50%)`;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'white';
            ctx.font = '36px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(['上方画布', '右侧画布', '下方画布', '左侧画布'][index], canvas.width/2, canvas.height/2);

            // 设置初始位置：除了第一个，都移到屏幕外
            if (index !== 0) {
                if (index === 1) canvas.style.left = '100vw';
                if (index === 2) canvas.style.top = '100vh';
                if (index === 3) canvas.style.left = '-100vw';
            }
        });

        // 按钮点击切换逻辑
        buttons.forEach(button => {
            button.addEventListener('click', () => {
                const targetIndex = parseInt(button.dataset.target);
                if (targetIndex === currentIndex) return;

                // 把当前显示的Canvas移回对应屏幕外位置
                switch(currentIndex) {
                    case 0: canvases[currentIndex].style.top = '-100vh'; break;
                    case 1: canvases[currentIndex].style.left = '100vw'; break;
                    case 2: canvases[currentIndex].style.top = '100vh'; break;
                    case 3: canvases[currentIndex].style.left = '-100vw'; break;
                }

                // 把目标Canvas移回视口
                canvases[targetIndex].style.top = '0';
                canvases[targetIndex].style.left = '0';

                currentIndex = targetIndex;
            });
        });

        // 监听窗口 resize，更新Canvas尺寸
        window.addEventListener('resize', () => {
            canvases.forEach(canvas => {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                // 这里可以重新绘制Canvas内容，避免窗口变化后内容错位
                const ctx = canvas.getContext('2d');
                ctx.fillStyle = `hsl(${Array.from(canvases).indexOf(canvas) * 90}, 70%, 50%)`;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            });
        });
    </script>
</body>
</html>

• Canvas的双重尺寸：上面代码里特意加了canvas.width = window.innerWidth，这是因为Canvas有两个尺寸——CSS显示尺寸和自身的绘图缓冲区尺寸，默认缓冲区是300x150，不匹配的话绘图会模糊。
• 性能优化：如果之后要加很多Canvas，每个Canvas都在后台保留状态可能会占用资源，不过新手阶段先实现功能，后续再考虑按需销毁/重建Canvas即可。
• 替代方案：如果你的需求只是切换全屏内容，不需要Canvas的绘图能力，用div代替Canvas会更简单，布局逻辑完全一致，只是把Canvas换成div，设置背景或文字内容就行。

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