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

更新时间：2025年02月26日 09:42:12 作者：yqcoder

这篇文章主要介绍了如何使用HTML、CSS和JavaScript创建一个简单的电影院座位图,并实现选票功能,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、布局与基础设置

1. HTML 结构

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

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

2. CSS 样式

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

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

3. JavaScript 初始化

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

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

二、绘制座位图

1. 定义座位布局

假设电影院的座位是一个矩形排列的矩阵，可以用一个二维数组来表示座位布局。例如，`0`表示空座位，`1`表示已售座位，`2`表示可选座位。

const seatLayout = [
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
];

2. 绘制单个座位

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

const seatWidth = 40;
const seatHeight = 40;
const seatMargin = 5;
function drawSeat(x, y, status) {
  ctx.beginPath();
  ctx.rect(x, y, seatWidth, seatHeight);
  if (status === 0) {
    ctx.fillStyle = "gray";
  } else if (status === 1) {
    ctx.fillStyle = "red";
  } else if (status === 2) {
    ctx.fillStyle = "green";
  }
  ctx.fill();
  ctx.strokeStyle = "black";
  ctx.stroke();
}

3. 绘制整个座位图

使用嵌套循环遍历座位布局数组，调用`drawSeat`函数来绘制每个座位。

let x = 0;
let y = 0;
for (let row = 0; row < seatLayout.length; row++) {
  for (let col = 0; col < seatLayout[row].length; col++) {
    drawSeat(x, y, seatLayout[row][col]);
    x += seatWidth + seatMargin;
  }
  x = 0;
  y += seatHeight + seatMargin;
}

三、实现选票功能

1. 添加点击事件监听器

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

canvas.addEventListener("click", function (e) {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  let seatX = Math.floor(x / (seatWidth + seatMargin));
  let seatY = Math.floor(y / (seatHeight + seatMargin));
  if (
    seatX >= 0 &&
    seatX < seatLayout[0].length &&
    seatY >= 0 &&
    seatY < seatLayout.length
  ) {
    let seatStatus = seatLayout[seatY][seatX];
    if (seatStatus === 2) {
      seatLayout[seatY][seatX] = 1;
      drawSeat(
        seatX * (seatWidth + seatMargin),
        seatY * (seatHeight + seatMargin),
        1
      );
    }
  }
});

2. 记录所选座位信息

可以创建一个数组来记录所选座位的信息，例如座位的坐标或者座位在座位布局数组中的索引。

const selectedSeats = [];
canvas.addEventListener("click", function (e) {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  let seatX = Math.floor(x / (seatWidth + seatMargin));
  let seatY = Math.floor(y / (seatHeight + seatMargin));
  if (
    seatX >= 0 &&
    seatX < seatLayout[0].length &&
    seatY >= 0 &&
    seatY < seatLayout.length
  ) {
    let seatStatus = seatLayout[seatY][seatX];
    if (seatStatus === 2) {
      seatLayout[seatY][seatX] = 1;
      drawSeat(
        seatX * (seatWidth + seatMargin),
        seatY * (seatHeight + seatMargin),
        1
      );
      selectedSeats.push({ x: seatX, y: seatY });
    }
  }
});

四、其他功能扩展

1. 显示座位信息

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

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

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

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

const buyButton = document.createElement("button");
buyButton.textContent = "购买所选座位";
document.body.appendChild(buyButton);
buyButton.addEventListener("click", function () {
  const seatData = {
    selectedSeats: selectedSeats,
  };
  fetch("https://example.com/buy-seats", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(seatData),
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.success) {
        alert("购票成功！");
      } else {
        alert("购票失败。");
      }
    });
});

总结

到此这篇关于前端如何用canvas做电影院选票功能的文章就介绍到这了,更多相关前端canvas电影院选票功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js实现简单购物车模块
这篇文章主要为大家详细介绍了js实现简单购物车模块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
javascript轻量级库createjs使用Easel实现拖拽效果
这篇文章主要介绍了javascript轻量级库createjs使用Easel实现拖拽效果的相关资料,需要的朋友可以参考下
2016-02-02
javascript原生封装一个淡入淡出效果的函数测试实例代码
这篇文章主要介绍了javascript原生封装一个淡入淡出效果的函数,主要有FadeIn淡入函数和FadeOut淡出函数，需要的朋友可以参考下
2018-03-03
三分钟学会用ES7中的Async/Await进行异步编程
这篇文章主要介绍了三分钟学会用ES7中的Async/Await进行异步编程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
openlayers实现地图弹窗
这篇文章主要为大家详细介绍了openlayers实现地图弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
JavaScript网格中的最小路径讲解
这篇文章主要介绍了JavaScript网格中的最小路径讲解，所有路径经过的单元格的值之和加上所有移动的代价之和。从第一行任意单元格出发，返回到达最后一行任意单元格的最小路径代价
2022-06-06
javascript的防抖节流函数解析
这篇文章主要为大家介绍了javascript防抖节流函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
js鼠标坐标获取常用的三个方法
这篇文章主要给大家介绍了js鼠标坐标获取常用的三个方法,在 JavaScript中当事件发生时获取鼠标的位置是件很重要的事件,需要的朋友可以参考下
2023-09-09
js仿京东轮播效果选项卡套选项卡使用
这篇文章主要为大家详细介绍了js仿京东轮播效果，选项卡里套选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
18个高频使用的JS工具方法总结
这篇文章主要为大家分享一下18个在项目中使用很高频的JS工具方法，希望大家能够知其然也知其所以然，不要只会调用 api，也要会写 api，快跟随小编一起学习一下吧
2022-04-04