如何在JavaScript Canvas中调整精灵绘制顺序实现3D深度效果

要实现这种前后遮挡的深度感，核心就是按对象的垂直位置调整绘制顺序——屏幕上越靠下的（y值越大）先画，越靠上的后画，这样上方的角色就会覆盖下方的敌人，符合真实的视觉逻辑。

修改你的draw函数，把角色和敌人合并排序后再绘制，具体代码如下：

draw() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

    this.ctx.translate(this.camera_x, 0);

    this.addObjectsToMap(this.level.background);
    this.addObjectsToMap(this.blood);
    this.addObjectsToMap(this.throwable);

    // 把角色和敌人合并成一个数组，按对象底部的y坐标排序（底部越靠下的先画）
    const charactersAndEnemies = [...this.level.enemies, this.character];
    charactersAndEnemies.sort((a, b) => {
        // 用对象底部位置判断更精准，避免角色脚在敌人头上但身体还被遮挡的情况
        return (a.y + a.height) - (b.y + b.height);
    });
    // 按排序后的顺序绘制角色和敌人
    charactersAndEnemies.forEach(obj => this.addToMap(obj));

    this.addObjectsToMap(this.level.blessings);
    this.addObjectsToMap(this.level.bombs);

    this.ctx.translate(-this.camera_x, 0); //fixed objects after this line

    let self = this;
    requestAnimationFrame(function () {
        self.draw();
    });
}

关键说明： #

• 用扩展运算符[...this.level.enemies, this.character]把敌人数组和角色对象合并成新数组，统一处理排序逻辑
• 排序时采用y + height计算对象底部的y坐标，比只用y值判断更精准——比如角色站在敌人头顶时，角色底部的y坐标更高，这时候角色会被后绘制，自然覆盖在敌人上方
• 排序逻辑：返回值为负时，a排在b前面；正的话b排在a前面。这样底部位置更靠下的对象会先绘制，底部靠上的对象后绘制，实现正确的前后遮挡

你的addObjectsToMap和addToMap函数无需修改，保持原有绘制逻辑即可。

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