当前位置：首页 > JavaScript

js实现换装

2026-01-31 14:55:05JavaScript

实现换装的基本思路

在JavaScript中实现换装功能通常涉及动态修改DOM元素的样式或属性。常见的应用场景包括游戏角色换装、电商产品颜色切换等。核心原理是通过事件触发改变目标元素的显示状态。

通过CSS类切换实现换装

定义不同服装状态的CSS类，通过JavaScript切换这些类：

/* 基础样式 */
.character {
  width: 200px;
  height: 300px;
  background-image: url('default-outfit.png');
}

/* 不同服装样式 */
.outfit-summer {
  background-image: url('summer-outfit.png');
}

.outfit-winter {
  background-image: url('winter-outfit.png');
}

const character = document.querySelector('.character');

// 换装函数
function changeOutfit(outfitType) {
  // 移除所有服装类
  character.classList.remove('outfit-summer', 'outfit-winter');

  // 添加新服装类
  if(outfitType) {
    character.classList.add(`outfit-${outfitType}`);
  }
}

// 事件绑定示例
document.getElementById('summer-btn').addEventListener('click', () => {
  changeOutfit('summer');
});

通过直接修改样式属性实现

对于简单的颜色切换，可以直接操作style属性：

function changeColor(color) {
  const shirt = document.getElementById('shirt');
  shirt.style.fill = color; // 对于SVG元素
  // 或
  shirt.style.backgroundColor = color; // 对于div元素
}

使用Canvas实现复杂换装

对于游戏角色等复杂换装，可以使用Canvas分层绘制：

const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');

// 基础角色
function drawBaseCharacter() {
  // 绘制基础角色
}

// 服装部件
const outfits = {
  hat: null,
  top: null,
  bottom: null
};

// 加载服装资源
function loadOutfit(type, imageUrl) {
  const img = new Image();
  img.src = imageUrl;
  img.onload = () => {
    outfits[type] = img;
    redrawCharacter();
  };
}

// 重绘角色
function redrawCharacter() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBaseCharacter();

  // 绘制各个服装部件
  Object.values(outfits).forEach(item => {
    if(item) {
      ctx.drawImage(item, 0, 0);
    }
  });
}

// 换装接口
function equipOutfit(type, imageUrl) {
  loadOutfit(type, imageUrl);
}

使用Sprite Sheet实现动画换装

对于需要动画的换装效果，可以使用精灵图：

class Character {
  constructor() {
    this.outfit = 'default';
    this.sprites = {
      default: {x:0, y:0, width:64, height:64},
      summer: {x:64, y:0, width:64, height:64},
      winter: {x:128, y:0, width:64, height:64}
    };
  }

  draw(ctx) {
    const sprite = this.sprites[this.outfit];
    ctx.drawImage(
      spriteSheet,
      sprite.x, sprite.y, sprite.width, sprite.height,
      0, 0, sprite.width, sprite.height
    );
  }

  changeOutfit(type) {
    if(this.sprites[type]) {
      this.outfit = type;
    }
  }
}