前端如何用canvas做電影院選票功能詳解
更新時間：2025年02月26日 09:42:12 作者：yqcoder
這篇文章主要介紹了如何使用HTML、CSS和JavaScript創(chuàng)建一個簡單的電影院座位圖,并實現(xiàn)選票功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
一、布局與基礎設置
1. HTML 結構
首先在 HTML 文件中創(chuàng)建一個`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. 定義座位布局
假設電影院的座位是一個矩形排列的矩陣，可以用一個二維數(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. 繪制單個座位
編寫一個函數(shù)來繪制單個座位?？梢愿鶕坏臓顟B(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. 繪制整個座位圖
使用嵌套循環(huán)遍歷座位布局數(shù)組，調用`drawSeat`函數(shù)來繪制每個座位。
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;
}三、實現(xiàn)選票功能
1. 添加點擊事件監(jiān)聽器
為`canvas`元素添加一個點擊事件監(jiān)聽器，當用戶點擊座位時，判斷點擊的位置對應的座位，并根據座位狀態(tài)進行相應的操作。
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)建一個數(shù)組來記錄所選座位的信息，例如座位的坐標或者座位在座位布局數(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 });
}
}
});四、其他功能擴展
1. 顯示座位信息
可以在頁面上添加一個區(qū)域來顯示所選座位的信息，如座位號、排數(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) {
//... 前面的點擊事件處理代碼
updateSeatInfo();
});2. 與后端交互（購買功能）
如果要實現(xiàn)真正的購票功能，需要將所選座位信息發(fā)送到后端服務器?？梢允褂胉fetch`或`XMLHttpRequest`等方法來發(fā)送數(shù)據。例如：
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電影院選票功能內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單購物車模塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
javascript輕量級庫createjs使用Easel實現(xiàn)拖拽效果
這篇文章主要介紹了javascript輕量級庫createjs使用Easel實現(xiàn)拖拽效果的相關資料,需要的朋友可以參考下2016-02-02
javascript原生封裝一個淡入淡出效果的函數(shù)測試實例代碼
這篇文章主要介紹了javascript原生封裝一個淡入淡出效果的函數(shù),主要有FadeIn淡入函數(shù)和FadeOut淡出函數(shù)，需要的朋友可以參考下2018-03-03
這篇文章主要介紹了三分鐘學會用ES7中的Async/Await進行異步編程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細介紹了openlayers實現(xiàn)地圖彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了JavaScript網格中的最小路徑講解，所有路徑經過的單元格的?值之和?加上?所有移動的?代價之和?。從?第一行?任意單元格出發(fā)，返回到達?最后一行?任意單元格的最小路徑代價2022-06-06
這篇文章主要為大家介紹了javascript防抖節(jié)流函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要給大家介紹了js鼠標坐標獲取常用的三個方法,在 JavaScript中當事件發(fā)生時獲取鼠標的位置是件很重要的事件,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了js仿京東輪播效果，選項卡里套選項卡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家分享一下18個在項目中使用很高頻的JS工具方法，希望大家能夠知其然也知其所以然，不要只會調用?api，也要會寫?api，快跟隨小編一起學習一下吧2022-04-04