前端怎样用 canvas 做电影院选票功能

一、结构与基础设置

1. HTML 结构

首先在 HTML 文件中创建一个`canvas`元素，用于绘制座位图。比方：

1. <canvas id="seat-canvas" width="800" height="600"></canvas>

复制代码

2. CSS 样式

可以为`canvas`元素添加一些基本的样式，如边框等，让它在页面中更好地体现。

1. #seat-canvas {
3.   border: 1px solid black;
5. }

复制代码

3. JavaScript 初始化

在 JavaScript 文件中获取`canvas`元素，并获取其绘图上下文。绘图上下文有两种类型：`2d`和`webgl`，这里利用`2d`上下文来绘制简朴的座位图。

1. const canvas = document.getElementById("seat-canvas");
3. const ctx = canvas.getContext("2d");

复制代码

二、绘制座位图

1. 定义座位结构

假设电影院的座位是一个矩形分列的矩阵，可以用一个二维数组来表现座位结构。比方，`0`表现空座位，`1`表现已售座位，`2`表现可选座位。

1. const seatLayout = [
3.   [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
5.   [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
7.   [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
9.   [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
11.   [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
13.   [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
15. ];

复制代码

2. 绘制单个座位

编写一个函数来绘制单个座位。可以根据座位的状态（可选、已售等）来绘制不同的颜色或样式。比方，用绿色表现可选座位，红色表现已售座位，灰色表现不可用座位。

1. const seatWidth = 40;
3. const seatHeight = 40;
5. const seatMargin = 5;
7. function drawSeat(x, y, status) {
9.   ctx.beginPath();
11.   ctx.rect(x, y, seatWidth, seatHeight);
13.   if (status === 0) {
15.     ctx.fillStyle = "gray";
17.   } else if (status === 1) {
19.     ctx.fillStyle = "red";
21.   } else if (status === 2) {
23.     ctx.fillStyle = "green";
25.   }
27.   ctx.fill();
29.   ctx.strokeStyle = "black";
31.   ctx.stroke();
33. }

复制代码

3. 绘制整个座位图

利用嵌套循环遍历座位结构数组，调用`drawSeat`函数来绘制每个座位。

1. let x = 0;
3. let y = 0;
5. for (let row = 0; row < seatLayout.length; row++) {
7.   for (let col = 0; col < seatLayout[row].length; col++) {
9.     drawSeat(x, y, seatLayout[row][col]);
11.     x += seatWidth + seatMargin;
13.   }
15.   x = 0;
17.   y += seatHeight + seatMargin;
19. }

复制代码

三、实现选票功能

1. 添加点击事件监听器

为`canvas`元素添加一个点击事件监听器，当用户点击座位时，判断点击的位置对应的座位，并根据座位状态进行相应的操作。

1. canvas.addEventListener("click", function (e) {
3.   const rect = canvas.getBoundingClientRect();
5.   const x = e.clientX - rect.left;
7.   const y = e.clientY - rect.top;
9.   let seatX = Math.floor(x / (seatWidth + seatMargin));
11.   let seatY = Math.floor(y / (seatHeight + seatMargin));
13.   if (
15.     seatX >= 0 &&
17.     seatX < seatLayout[0].length &&
19.     seatY >= 0 &&
21.     seatY < seatLayout.length
23.   ) {
25.     let seatStatus = seatLayout[seatY][seatX];
27.     if (seatStatus === 2) {
29.       seatLayout[seatY][seatX] = 1;
31.       drawSeat(
33.         seatX * (seatWidth + seatMargin),
35.         seatY * (seatHeight + seatMargin),
37.         1
39.       );
41.     }
43.   }
45. });

复制代码

2. 记录所选座位信息

可以创建一个数组来记录所选座位的信息，比方座位的坐标大概座位在座位结构数组中的索引。

1. const selectedSeats = [];
3. canvas.addEventListener("click", function (e) {
5.   const rect = canvas.getBoundingClientRect();
7.   const x = e.clientX - rect.left;
9.   const y = e.clientY - rect.top;
11.   let seatX = Math.floor(x / (seatWidth + seatMargin));
13.   let seatY = Math.floor(y / (seatHeight + seatMargin));
15.   if (
17.     seatX >= 0 &&
19.     seatX < seatLayout[0].length &&
21.     seatY >= 0 &&
23.     seatY < seatLayout.length
25.   ) {
27.     let seatStatus = seatLayout[seatY][seatX];
29.     if (seatStatus === 2) {
31.       seatLayout[seatY][seatX] = 1;
33.       drawSeat(
35.         seatX * (seatWidth + seatMargin),
37.         seatY * (seatHeight + seatMargin),
39.         1
41.       );
43.       selectedSeats.push({ x: seatX, y: seatY });
45.     }
47.   }
49. });

复制代码

四、其他功能扩展

1. 体现座位信息

可以在页面上添加一个区域来体现所选座位的信息，如座位号、排数等。

1. const seatInfoDiv = document.createElement("div");
3. document.body.appendChild(seatInfoDiv);
5. function updateSeatInfo() {
7.   let seatInfoText = "所选座位：";
9.   selectedSeats.forEach((seat) => {
11.     seatInfoText += `排 ${seat.y + 1} 座 ${seat.x + 1}, `;
13.   });
15.   seatInfoDiv.textContent = seatInfoText;
17. }
19. canvas.addEventListener("click", function (e) {
21.   //... 前面的点击事件处理代码
23.   updateSeatInfo();
25. });

复制代码

2. 与后端交互（购买功能）

假如要实现真正的购票功能，需要将所选座位信息发送到后端服务器。可以利用`fetch`或`XMLHttpRequest`等方法来发送数据。比方：

1. const buyButton = document.createElement("button");
3. buyButton.textContent = "购买所选座位";
5. document.body.appendChild(buyButton);
7. buyButton.addEventListener("click", function () {
9.   const seatData = {
11.     selectedSeats: selectedSeats,
13.   };
15.   fetch("https://example.com/buy-seats", {
17.     method: "POST",
19.     headers: {
21.       "Content-Type": "application/json",
23.     },
25.     body: JSON.stringify(seatData),
27.   })
29.     .then((response) => response.json())
31.     .then((data) => {
33.       if (data.success) {
35.         alert("购票成功！");
37.       } else {
39.         alert("购票失败。");
41.       }
43.     });
45. });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。