前端怎样用 canvas 做电影院选票功能
一、结构与基础设置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. 绘制单个座位
编写一个函数来绘制单个座位。可以根据座位的状态（可选、已售等）来绘制不同的颜色或样式。比方，用绿色表现可选座位，红色表现已售座位，灰色表现不可用座位。
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.length; col++) {
drawSeat(x, y, seatLayout);
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.length &&
seatY >= 0 &&
seatY < seatLayout.length
) {
let seatStatus = seatLayout;
if (seatStatus === 2) {
seatLayout = 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.length &&
seatY >= 0 &&
seatY < seatLayout.length
) {
let seatStatus = seatLayout;
if (seatStatus === 2) {
seatLayout = 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("购票失败。");
}
});
});
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]