js图片叠加旋转切换

基础概念

在JavaScript中实现图片的叠加、旋转和切换，通常涉及到HTML5的Canvas API。Canvas提供了一个可以通过JavaScript脚本来绘制图形的HTML元素。通过Canvas，我们可以对图片进行各种变换，包括叠加、旋转和切换。

类型与应用场景

叠加：将多张图片叠加在一起，常用于制作合成图像或特效。
旋转：改变图片的方向，适用于动态展示或游戏中的角色动作。
切换：在不同图片之间快速切换，常见于轮播图或动态背景。

示例代码

以下是一个简单的示例，展示了如何在Canvas上实现图片的叠加、旋转和切换：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Overlay, Rotate and Switch</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<button onclick="switchImage()">Switch Image</button>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  let currentImageIndex = 0;
  const images = [
    new Image(),
    new Image()
  ];

  images[0].src = 'path/to/image1.jpg';
  images[1].src = 'path/to/image2.jpg';

  function drawImage() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const img = images[currentImageIndex];
    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(Math.PI / 4); // 旋转45度
    ctx.drawImage(img, -img.width / 2, -img.height / 2);
    ctx.restore();
  }

  function switchImage() {
    currentImageIndex = (currentImageIndex + 1) % images.length;
    drawImage();
  }

  images[0].onload = images[1].onload = drawImage;
</script>
</body>
</html>