如何在两个单元格之间拉伸线(标签)

时间:2014-09-29 16:04:01

标签: javascript jquery html css

我试图拉伸两个牢房之间的一条线 我有桌子和细胞,我想从一个细胞拉伸到另一个细胞。

这就是我所拥有的:
enter image description here

这是我想要的
enter image description here

我尝试根据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>

2 个答案:

答案 0 :(得分:1)

您可以创建一个带有黑色边框的简单div元素,然后使用css transform旋转它。然后,使用topleft属性将其绝对定位到您想要的位置:

.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;
}

Updated Fiddle

答案 1 :(得分:0)

check the fiddle here

<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;
}