Canvas实现电影院选票功能

使用 Canvas 实现电影院选票功能是一个有趣且具有挑战性的任务。Canvas 提供了强大的绘图能力，适合实现复杂的交互式 UI。以下是一个基本的实现思路和步骤：

1. 设计数据结构

首先，我们需要设计一个数据结构来表示影院的座位布局。通常，影院座位可以表示为一个二维数组，每个元素代表一个座位，包含其状态（可选、已选、不可选等）。

const seats = [
  ['A1', 'A2', 'A3', 'A4'],
  ['B1', 'B2', 'B3', 'B4'],
  ['C1', 'C2', 'C3', 'C4'],
  // 更多行...
];

2. 创建 Canvas 元素

在 HTML 中创建一个 Canvas 元素，并设置其宽度和高度。

<canvas id="seatMap" width="800" height="600"></canvas>

3. 绘制座位图

使用 Canvas 的绘图 API 来绘制座位图。每个座位可以表示为一个矩形或圆形，并根据其状态填充不同的颜色。

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

const seatWidth = 50;
const seatHeight = 50;
const padding = 10;

function drawSeat(x, y, status) {
  ctx.fillStyle = status === 'available' ? 'green' : status === 'selected' ? 'blue' : 'gray';
  ctx.fillRect(x, y, seatWidth, seatHeight);
  ctx.strokeRect(x, y, seatWidth, seatHeight);
}

function drawSeatMap() {
  seats.forEach((row, rowIndex) => {
    row.forEach((seat, seatIndex) => {
      const x = seatIndex * (seatWidth + padding);
      const y = rowIndex * (seatHeight + padding);
      drawSeat(x, y, 'available'); // 假设所有座位初始状态为可选
    });
  });
}

drawSeatMap();

4. 处理用户交互

为 Canvas 添加事件监听器，处理用户的点击事件。当用户点击某个座位时，更新该座位的状态并重新绘制。

canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  seats.forEach((row, rowIndex) => {
    row.forEach((seat, seatIndex) => {
      const seatX = seatIndex * (seatWidth + padding);
      const seatY = rowIndex * (seatHeight + padding);

      if (x >= seatX && x <= seatX + seatWidth && y >= seatY && y <= seatY + seatHeight) {
        // 切换座位状态
        if (seat.status === 'available') {
          seat.status = 'selected';
        } else if (seat.status === 'selected') {
          seat.status = 'available';
        }
        drawSeatMap(); // 重新绘制座位图
      }
    });
  });
});

5. 优化和扩展

• 性能优化：如果座位数量较多，可以考虑使用离屏 Canvas 或 Web Workers 来提高性能。
• 动画效果：可以为座位选择添加动画效果，提升用户体验。
• 响应式设计：确保 Canvas 在不同屏幕尺寸下都能正常显示。
• 数据持久化：将用户选择的座位信息保存到本地存储或发送到服务器。

6. 集成到前端框架

如果项目使用了 React、Vue 或 Angular 等前端框架，可以将 Canvas 逻辑封装成组件，方便复用和管理。

// React 示例
function SeatMap({ seats }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    // 绘制座位图的逻辑
  }, [seats]);

  return <canvas ref={canvasRef} width="800" height="600" />;
}

总结

使用 Canvas 实现电影院选票功能需要结合绘图、事件处理和状态管理。通过合理的设计和优化，可以实现一个高效、交互性强的选票系统。