Question

我知道如何使用<canvas>标记绘制线条我想绘制我创建的阶梯画布线。
它应该是动态的，因为线的角度每次都会改变，因此手动解决方案来复制\粘贴具有特定角度的梯形图片对我没有帮助。

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

这是我想要的：
enter image description here

我试图使用：

      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 120, 50);
      };
      imageObj.src = 'http://s28.postimg.org/7sjqjzpah/ladderpattern.png';

但它只打印了梯子的一小部分。
任何想法我怎样才能使每条线都被创建为梯形图？

DEMO (JSFIDDLE): Board with only lines (without ladders)
DEMO (JSFIDDLE): With picture I tried to draw

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

td span {
    position: absolute;
    bottom: 0;
}

#myCanvas {
    z-index: 10;
    position:absolute;
    font:bold;
    color:red;

}

HTML：

<body>

<div id="board" value="5">
<canvas id="myCanvas" width="600" height="500"></canvas>
<canvas id="myCanvas2" width="600" height="500"></canvas>
<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></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> </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>
      <img src = "http://s23.postimg.org/ynlvim1x3/image.png" onclick="doSomething()"></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>
     </table>      
<script>
var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 120, 50);
      };
      imageObj.src = 'http://s28.postimg.org/7sjqjzpah/ladderpattern.png';

      context.beginPath();
      context.moveTo(120, 45);
      context.lineTo(350, 150);
      context.stroke();
      context.stroke();

function doSomething()
{
    alert("Ping");
}

Answer 1

您可以使用画布'转换来绘制有角度的梯子：

保存未旋转的上下文状态：context.save();
翻译到您的行的开头：context.translate(x,y);。
旋转到与您的行相同的角度：context.rotate(lineAngle);
翻译重置指定x，y处的0,0原点。旋转将按指定的角度旋转整个画布，旋转点位于您在“平移”中指定的x，y。通过使用translate和rotate，您不必重新计算为每个新行绘制梯形图的代码坐标。
画你的梯子。
将上下文恢复为未旋转状态：context.restore();

enter image description here

这是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

drawLadder(25,25,150,125);

function drawLadder(x0,y0,x1,y1){
  var dx=x1-x0;
  var dy=y1-y0;
  
  // calc the length of the line
  var length=Math.sqrt(dx*dx+dy*dy);
  
  // calc the angle of the line
  var angle=Math.atan2(dy,dx);

  // draw the ladder
  ctx.save();
  ctx.translate(x0,y0);
  ctx.rotate(angle);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(length,0);
  ctx.moveTo(0,8);
  ctx.lineTo(length,8);
  for(var i=1;i<(length-2)/4;i++){
    ctx.moveTo(i*4,0);
    ctx.lineTo(i*4,8);
  }
  ctx.stroke();
  ctx.restore();

}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

如何在两个单元格之间的画布线上动态绘制图像

1 个答案: