欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端如何用canvas做電影院選票功能詳解

 更新時(shí)間：2025年02月26日 09:42:12   作者：yqcoder  
這篇文章主要介紹了如何使用HTML、CSS和JavaScript創(chuàng)建一個(gè)簡(jiǎn)單的電影院座位圖,并實(shí)現(xiàn)選票功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、布局與基礎(chǔ)設(shè)置

1. HTML 結(jié)構(gòu)

首先在 HTML 文件中創(chuàng)建一個(gè)`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`上下文來繪制簡(jiǎn)單的座位圖。

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

二、繪制座位圖

1. 定義座位布局

假設(shè)電影院的座位是一個(gè)矩形排列的矩陣，可以用一個(gè)二維數(shù)組來表示座位布局。例如，`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. 繪制單個(gè)座位

編寫一個(gè)函數(shù)來繪制單個(gè)座位?？梢愿鶕?jù)座位的狀態(tài)（可選、已售等）來繪制不同的顏色或樣式。例如，用綠色表示可選座位，紅色表示已售座位，灰色表示不可用座位。

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. 繪制整個(gè)座位圖

使用嵌套循環(huán)遍歷座位布局?jǐn)?shù)組，調(diào)用`drawSeat`函數(shù)來繪制每個(gè)座位。

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;
}

三、實(shí)現(xiàn)選票功能

1. 添加點(diǎn)擊事件監(jiān)聽器

為`canvas`元素添加一個(gè)點(diǎn)擊事件監(jiān)聽器，當(dāng)用戶點(diǎn)擊座位時(shí)，判斷點(diǎn)擊的位置對(duì)應(yīng)的座位，并根據(jù)座位狀態(tài)進(jìn)行相應(yīng)的操作。

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. 記錄所選座位信息

可以創(chuàng)建一個(gè)數(shù)組來記錄所選座位的信息，例如座位的坐標(biāo)或者座位在座位布局?jǐn)?shù)組中的索引。

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 });
    }
  }
});

四、其他功能擴(kuò)展

1. 顯示座位信息

可以在頁面上添加一個(gè)區(qū)域來顯示所選座位的信息，如座位號(hào)、排數(shù)等。

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) {
  //... 前面的點(diǎn)擊事件處理代碼
  updateSeatInfo();
});

2. 與后端交互（購買功能）

如果要實(shí)現(xiàn)真正的購票功能，需要將所選座位信息發(fā)送到后端服務(wù)器。可以使用`fetch`或`XMLHttpRequest`等方法來發(fā)送數(shù)據(jù)。例如：

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("購票失敗。");
      }
    });
});

總結(jié) 

到此這篇關(guān)于前端如何用canvas做電影院選票功能的文章就介紹到這了,更多相關(guān)前端canvas電影院選票功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論