Canvas随机下落对象z-index与opacity设置无效问题求助

问题描述 #

我制作了一个Canvas效果：对象沿Canvas顶部x轴随机生成，随机以3种尺寸渲染，根据尺寸通过if语句设置下落速度；对象移出底部后会重置位置、尺寸和速度，这部分功能正常。但尝试根据尺寸修改对象的opacity和z-index时完全无效，求解决。

核心问题原因 #

Canvas是像素级绘制画布，并非DOM元素容器：

• 你定义的obstacle是普通JS对象，不存在style属性，因此obstacle.style.zIndex和obstacle.style.opacity完全不起作用。
• Canvas没有DOM的z-index层级概念，元素层级由绘制顺序决定：后绘制的元素会覆盖先绘制的元素。

具体修复步骤 #

1. 透明度控制：使用ctx.globalAlpha
   在绘制每个障碍物前，根据尺寸设置对应透明度，绘制完成后恢复默认值（避免影响后续元素绘制）。

2. 层级控制：按尺寸排序后绘制
   尺寸越大的障碍物需要在最上层，因此先对障碍物数组按宽度从小到大排序，先画小尺寸（层级低）的对象，再画大尺寸（层级高）的对象，实现类似z-index的叠层效果。

修改后的完整代码 #

HTML #

<section id="canvasContainer">
</section>

CSS #

body {
    max-height: 100vh;
    overflow: hidden;
}

#canvasContainer {
    display: flex;
    justify-content: center;
}

canvas {
    background-color: black;
    width: 100%;
    max-width: 500px;
    object-fit: contain;
}

JavaScript #

const canvasContainer = document.querySelector('#canvasContainer');
let newCanvas = document.createElement('canvas');
let canvas = document.querySelector('#canvas');

const canvasWidth = 500;
const canvasHeight = 500;

const obstacleImage = new Image();
obstacleImage.src = "./obstacle.png"
const obstacles = [];
const numberOfObstacles = 10;
    
newCanvas.setAttribute('id', 'canvas'); 
newCanvas.setAttribute('width', canvasWidth);
newCanvas.setAttribute('height', canvasHeight);

canvasContainer.append(newCanvas);
canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

// 随机数生成函数
function ChooseRandom(min, max) {
    return Math.floor(Math.random() * ((max + 1) - min) + min);
}
  
// 初始化障碍物数组
for (let i = 0; i < numberOfObstacles; i++) {
    const variableValue = ChooseRandom(1, 3);
    const x = ChooseRandom(50, 450);
    const y = ChooseRandom(50, 450);
    const obstacle = {
        x: x,
        y: y,
        width: 20 * variableValue,
        height: 20 * variableValue,
        speed: 0
    }

    obstacles.push(obstacle);
}

// 帧更新逻辑
setInterval( () => {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 用画布实际尺寸清除，更高效

    // 按宽度从小到大排序，先画小的（层级低），后画大的（层级高）
    obstacles.sort((a, b) => a.width - b.width);

    // 遍历处理每个障碍物
    for (let i = 0; i < obstacles.length; i++) {
        const obstacle = obstacles[i];

        // 根据尺寸设置速度和透明度参数
        let alpha = 1;
        if (obstacle.width <= 20) {
            obstacle.speed = 1;
            alpha = 0.33;
        } else if (obstacle.width <= 40) {
            obstacle.speed = 1.5;
            alpha = 0.66;
        } else {
            obstacle.speed = 2;
            alpha = 1;
        }

        obstacle.y += obstacle.speed / 2; 

        // 设置透明度并绘制
        ctx.globalAlpha = alpha;
        ctx.drawImage(
            obstacleImage,
            obstacle.x,
            obstacle.y,
            obstacle.width,
            obstacle.height
        );
        // 恢复默认透明度，避免影响后续绘制
        ctx.globalAlpha = 1;

        // 障碍物移出底部时重置（优化位置计算，避免超出画布）
        if (obstacle.y > canvasHeight) {
            const variableValue = ChooseRandom(1, 3);
            obstacle.width = 20 * variableValue;
            obstacle.height = 20 * variableValue;
            obstacle.x = ChooseRandom(0, canvasWidth - obstacle.width);
            obstacle.y = -obstacle.height; // 从顶部外开始下落，过渡更自然
        }
    }
}, 5);

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