我试图拉伸两个牢房之间的一条线 我有桌子和细胞,我想从一个细胞拉伸到另一个细胞。
这就是我所拥有的:
这是我想要的:
我尝试根据HTML canvas lineTo() Method使用<canvas>
代码,但它不起作用
我尝试在表格标签之前和之后添加它,但没有成功
也许有人知道怎么做。
我添加了jsfiddle示例:JSFIDDLE example
CSS:
td {
width: 100px;
height: 90px;
text-align: left;
vertical-align: top;
border: 1px solid black;
position: relative;
}
table
{
position: fixed;
left:9px;
top:8px;
}
tr:nth-child(even) td:nth-child(odd), tr:nth-child(odd) td:nth-child(even)
{
background:#00A2E8;
}
.soldiers
{
width:20px;
height:20px;
position: absolute;
}
td span {
position: absolute;
bottom: 0;
}
HTML:
<body>
<div id="board" value="5">
<table oncontextmenu="return false">
<tbody>
<tr>
<td class="" cellnumber="21" row="4" col="0"><span>21</span></td>
<td class="" cellnumber="22" row="4" col="1"><span>22</span>
<br><br><p class="SnakesAndLadders" from="22" to="6">Snake to 6 </p></td>
<td class="" cellnumber="23" row="4" col="2"><span>23</span></td>
<td class="" cellnumber="24" row="4" col="3"><span>24</span></td>
<td class="" cellnumber="25" row="4" col="4"><span>25</span></td>
</tr>
<tr>
<td class="" cellnumber="16" row="3" col="0"><span>16</span></td>
<td class="" cellnumber="17" row="3" col="1"><span>17</span></td>
<td class="" cellnumber="18" row="3" col="2"><span>18</span></td>
<td class="" cellnumber="19" row="3" col="3"><span>19</span></td>
<td class="" cellnumber="20" row="3" col="4"><span>20</span></td></tr>
<tr>
<td class="" cellnumber="11" row="2" col="0"><span>11</span></td>
<td class="" cellnumber="12" row="2" col="1"><span>12</span></td>
<td class="" cellnumber="13" row="2" col="2"><span>13</span></td>
<td class="" cellnumber="14" row="2" col="3"><span>14</span></td>
<td class="" cellnumber="15" row="2" col="4"><span>15</span>
<br><br><p class="SnakesAndLadders" from="15" to="24">Ladder to 24 </p>
</td>
</tr>
<tr>
<td class="" cellnumber="6" row="1" col="0"><span>6</span></td>
<td class="" cellnumber="7" row="1" col="1"><span>7</span></td>
<td class="" cellnumber="8" row="1" col="2"><span>8</span></td>
<td class="" cellnumber="9" row="1" col="3"><span>9</span></td>
<td class="" cellnumber="10" row="1" col="4"><span>10</span></td>
</tr>
<tr>
<td class="" cellnumber="1" row="0" col="0"><span>1</span></td>
<td class="" cellnumber="2" row="0" col="1"><span>2</span></td>
<td class="" cellnumber="3" row="0" col="2"><span>3</span></td>
<td class="" cellnumber="4" row="0" col="3"><span>4</span></td>
<td class="" cellnumber="5" row="0" col="4"><span>5</span></td>
</tr>
答案 0 :(得分:1)
您可以创建一个带有黑色边框的简单div
元素,然后使用css transform
旋转它。然后,使用top
和left
属性将其绝对定位到您想要的位置:
.line {
position: absolute;
height: 200px;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
border: 2px solid black;
top: 50px;
left: 300px;
}
答案 1 :(得分:0)
<canvas id="myCanvas" width="600" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(350, 50);
context.lineTo(450, 350);
context.stroke();
</script>
CSS
#myCanvas {
z-index: 10;
position:absolute;
}