当前位置：首页 > news >正文

前端如何用canvas来做电影院选票功能

news 来源：原创 2025/4/30 10:58:10

在前端开发中，使用 canvas 实现电影院选票功能可以通过以下步骤来完成。你需要绘制座位图，并处理用户交互来选择座位。以下是一个大概的流程：

1. 创建Canvas

首先，在HTML中创建一个canvas元素。

<canvas id="seatCanvas" width="600" height="400"></canvas>

2. 获取Canvas上下文

通过JavaScript获取canvas的绘图上下文。

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

3. 定义座位数据

定义一个数组来表示每个座位的位置和状态，例如是否已被选中或已被占用。

const seats = [
  { x: 50, y: 50, width: 40, height: 40, status: 'available' },
  { x: 100, y: 50, width: 40, height: 40, status: 'available' },
  { x: 150, y: 50, width: 40, height: 40, status: 'taken' },
  // 添加更多座位
];

4. 绘制座位图

使用canvas的绘图方法绘制每个座位。不同的状态可以用不同的颜色表示（如空闲、已选择、已占用）。

function drawSeats() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  seats.forEach(seat => {
    ctx.beginPath();
    ctx.rect(seat.x, seat.y, seat.width, seat.height);
    if (seat.status === 'available') {
      ctx.fillStyle = 'green'; // 空闲座位
    } else if (seat.status === 'taken') {
      ctx.fillStyle = 'red'; // 已占用座位
    } else if (seat.status === 'selected') {
      ctx.fillStyle = 'blue'; // 选中的座位
    }
    ctx.fill();
    ctx.stroke();
  });
}

5. 处理用户点击选择座位

使用 canvas 的 click 事件来监听用户点击的座位，更新选中状态。

canvas.addEventListener('click', function(event) {
  const x = event.offsetX;
  const y = event.offsetY;

  seats.forEach(seat => {
    if (x > seat.x && x < seat.x + seat.width && y > seat.y && y < seat.y + seat.height) {
      if (seat.status === 'available') {
        seat.status = 'selected'; // 将座位标记为选中
      } else if (seat.status === 'selected') {
        seat.status = 'available'; // 取消选中
      }
      drawSeats(); // 重新绘制座位
    }
  });
});

6. 初始化绘制座位

在页面加载时调用 drawSeats 来绘制初始座位图。

drawSeats();

完整代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>电影院选票</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="seatCanvas" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('seatCanvas');
    const ctx = canvas.getContext('2d');

    const seats = [
      { x: 50, y: 50, width: 40, height: 40, status: 'available' },
      { x: 100, y: 50, width: 40, height: 40, status: 'available' },
      { x: 150, y: 50, width: 40, height: 40, status: 'taken' },
      { x: 200, y: 50, width: 40, height: 40, status: 'available' },
      { x: 50, y: 100, width: 40, height: 40, status: 'available' },
      // 可以继续添加更多座位
    ];

    function drawSeats() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
      seats.forEach(seat => {
        ctx.beginPath();
        ctx.rect(seat.x, seat.y, seat.width, seat.height);
        if (seat.status === 'available') {
          ctx.fillStyle = 'green'; // 空闲座位
        } else if (seat.status === 'taken') {
          ctx.fillStyle = 'red'; // 已占用座位
        } else if (seat.status === 'selected') {
          ctx.fillStyle = 'blue'; // 选中的座位
        }
        ctx.fill();
        ctx.stroke();
      });
    }

    canvas.addEventListener('click', function(event) {
      const x = event.offsetX;
      const y = event.offsetY;

      seats.forEach(seat => {
        if (x > seat.x && x < seat.x + seat.width && y > seat.y && y < seat.y + seat.height) {
          if (seat.status === 'available') {
            seat.status = 'selected'; // 将座位标记为选中
          } else if (seat.status === 'selected') {
            seat.status = 'available'; // 取消选中
          }
          drawSeats(); // 重新绘制座位
        }
      });
    });

    drawSeats(); // 初始绘制座位
  </script>
</body>
</html>