当前位置：首页 > JavaScript

js实现换装

2026-04-05 07:03:06JavaScript

实现思路

换装功能通常涉及切换不同的图片或元素，可以通过JavaScript动态修改DOM元素的属性或样式来实现。以下是几种常见的方法：

方法一：切换图片源

通过修改<img>标签的src属性实现换装效果。

<img id="character" src="default-outfit.png" alt="角色默认服装">
<button onclick="changeOutfit('outfit1.png')">服装1</button>
<button onclick="changeOutfit('outfit2.png')">服装2</button>

<script>
function changeOutfit(newSrc) {
  document.getElementById('character').src = newSrc;
}
</script>

方法二：CSS类切换

通过切换CSS类来改变元素的样式或背景图。

<div id="character" class="default-outfit"></div>
<button onclick="changeOutfit('outfit1')">服装1</button>
<button onclick="changeOutfit('outfit2')">服装2</button>

<style>
.default-outfit { background-image: url('default-outfit.png'); }
.outfit1 { background-image: url('outfit1.png'); }
.outfit2 { background-image: url('outfit2.png'); }
</style>

<script>
function changeOutfit(className) {
  const character = document.getElementById('character');
  character.className = className;
}
</script>

方法三：Canvas绘制

使用Canvas动态绘制不同的服装图层。

<canvas id="characterCanvas" width="200" height="300"></canvas>
<button onclick="drawOutfit('outfit1.png')">服装1</button>
<button onclick="drawOutfit('outfit2.png')">服装2</button>

<script>
const canvas = document.getElementById('characterCanvas');
const ctx = canvas.getContext('2d');

// 绘制基础角色
function drawBase() {
  const baseImg = new Image();
  baseImg.src = 'base-character.png';
  baseImg.onload = () => {
    ctx.drawImage(baseImg, 0, 0, canvas.width, canvas.height);
  };
}

// 绘制服装
function drawOutfit(outfitSrc) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBase();
  const outfitImg = new Image();
  outfitImg.src = outfitSrc;
  outfitImg.onload = () => {
    ctx.drawImage(outfitImg, 0, 0, canvas.width, canvas.height);
  };
}

// 初始化
drawBase();
</script>

方法四：Sprite Sheet动画

使用精灵图（Sprite Sheet）实现换装效果。

js实现换装

<canvas id="spriteCanvas" width="100" height="100"></canvas>
<button onclick="changeSprite('outfit1', 0, 0)">服装1</button>
<button onclick="changeSprite('outfit2', 100, 0)">服装2</button>

<script>
const canvas = document.getElementById('spriteCanvas');
const ctx = canvas.getContext('2d');
const spriteSheet = new Image();
spriteSheet.src = 'spritesheet.png';

function changeSprite(outfit, x, y) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(spriteSheet, x, y, 100, 100, 0, 0, 100, 100);
}
</script>