平面图定位并在图上设置标识(不需要特别精确)
最编程
2024-08-13 22:21:29
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.table {
background-size: 100% 100%;
background-image: url(img/scene.jpg);
background-repeat: no-repeat;
border-spacing: 0;
table-layout: fixed;
}
</style>
</head>
<body>
<table width="800" height="800" id="myTable" class="table"></table>
<script>
let table = document.querySelector("#myTable")
//生成25行，每行25个32*32像素的单元格
for (let j = 0; j < 25; j++) {
let tr = document.createElement("tr")
table.appendChild(tr)
for (let i = 0; i < 25; i++) {
let td = document.createElement("td")
td.style.width="32px"
td.style.height="32px"
td.setAttribute("id", j * i + i)
tr.appendChild(td)
}
}
window.onload = () => {
//在第200块添加摄像头
let d = document.getElementById("200")
d.style.backgroundImage = 'url(img/camera.png)'
}
</script>
</body>
</html>
上一篇： 实战|A*寻路算法遇到的问题及解决方法
下一篇： 立面图 平面图 剖面图 CAD