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

在前端开发中,使用 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. 处理用户点击选择座位

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

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>

进一步优化

  • 可以增加座位的行列布局,更加细化座位的排布。
  • 可以将座位信息存储到数据库,进行用户选择保存。
  • 可以加入提示信息,比如显示已选择的座位、已售出的座位等。

这样,你就能够使用 canvas 来实现一个简单的电影院选票功能。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值