所以基本上我试图显示插槽，当用户选择一个位置并单击检查插槽按钮。
我试图显示矩形时，检查槽被点击，类似于附加的图像。请参考图片形象。
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<label>Location</label>
<select name="location">
<option>Location 1 </option>
<option>Location 2 </option>
<option>Location 3 </option>
<option>Location 4 </option>
</select><br><br>
<button> Check Slots </button>
<label> Choose a slot: </label>
</body>
</html>
使用CSS Grid
你可以使用Grid Layout显示槽位
<!DOCTYPE html>
<html>
<head>
<title>Slots Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
/**********************
* Container of slots *
**********************/
.slots-container {
width: 500px;
padding: 50px;
border: 1px solid black;
/* specify display as `grid` */
display: grid;
/*
specify template for columns in the grid
here 3 would mean the no. of slots you
need in each row and 1fr means 1
Fractional Unit
*/
grid-template-columns: repeat(3, 1fr);
/*
`row-gap` would specify distance b/w adjacent rows
`column-gap` would specify distance b/w adjacent columns
*/
row-gap: 50px;
column-gap: 50px;
}
/********
* Slot *
********/
.slot {
height: 200px;
border: 1px solid black;
}
</style>
<body>
<div class="slots-container">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
</div>
</body>
</html>试试这个
<p>Before canvas.</p>
<canvas width="120" height="60"></canvas>
<p>After canvas.</p>
<script>
let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
context.fillStyle = "enter code herered";
context.fillRect(10, 10, 100, 50);
</script>