使用画布Javascript绘制

也许你可以建议我，我需要用画布绘制，使用图像的坐标作为顶点，但是我把图像放在一个表格（html表格）中，所以我不知道如何做，如何在表格内部或表格上方绘制。例如，在坐标（60,90）上有一个图像，在坐标（79,45）上有一个图像，在坐标（70,64）上有另一个图像，我需要用这个坐标做一个三角形，但是图像被放在一个表格中（每个图像在不同的单元格中）。 这是我的绘图代码：

function draw(elem) { //elem is the image

var image= elem;
var position = image.getBoundingClientRect();
//alert(posicion.top+" "+ posicion.right+" "+posicion.bottom+" "+posicion.left);

var canvas = document.getElementById('myCanvas');
var contexto = canvas.getContext('2d');
       contexto.beginPath();
       contexto.moveTo(position.top,50);
       contexto.lineTo(position.top,150);
       contexto.lineTo(position.top+100,150);
       contexto.fill();
}

这是我的画布：

<canvas id="myCanvas" width="700" height="700">Your browse don't support canvas</canvas>

您的浏览不支持画布

我把它放在表代码下面，在其他函数中调用这个函数。如果你能帮我的话，那就太好了。

---

谢谢！

我希望我能正确理解您的问题：您在实际的表格元素（

）中有图像，在某些单元格中有图像。您在其下方放置了一个画布，您希望在其上绘制线条以连接表格中的图像

要做到这一点，只需从图像的绝对位置减去画布元素的绝对位置。这将使图像的位置相对于画布

例如

var canvas = document.getElementById('myCanvas');
var canvasPos = canvas.getBoundingClientRect();
var position = image.getBoundingClientRect();

var x = position.left - canvasPos.left;
var y = position.top - canvasPos.top;

var contexto = canvas.getContext('2d');
contexto.beginPath();
contexto.moveTo(x, y);
... next image

假设您在父级中有一个表和画布，如：

<div id="wrapper">
  <canvas id="lines"></canvas>
  <table id="table">
      <!-- 7*7 -->
  </table>
</div>

您需要使用线路连接图像，
您可能对图像中心感兴趣，但还需要考虑父偏移，因此需要从每个图像的

brc

（getBoundingClientRect）中减去该位置，即

td

父节点高度/宽度：

var table = document.getElementById("table");
var images = table.getElementsByTagName("img");
var canvas = document.getElementById("lines");
var ctx = canvas.getContext("2d");
var x, y; // Remember coordinates

canvas.width  = table.offsetWidth;
canvas.height = table.offsetHeight;


function connect( image ) {
  var im = new Image();
  im.onload = function(){ // make sure image is loaded
    var tabBcr = table.getBoundingClientRect();
    var imgBcr = image.getBoundingClientRect();
    ctx.beginPath();
    ctx.moveTo(x, y);
    x = imgBcr.left + (image.parentNode.offsetWidth / 2) - tabBcr.left;
    y = imgBcr.top + (image.parentNode.offsetHeight / 2) - tabBcr.top;
    ctx.lineTo(x, y);
    ctx.stroke();
  };
  im.src = images[i].src;
}


for(var i=0; i<images.length; i++){
  connect( images[i] );
}

var table=document.getElementById（“表”）；
var images=table.getElementsByTagName（“img”）；
var canvas=document.getElementById（“行”）；
var ctx=canvas.getContext（“2d”）；
var x，y；//记住坐标
canvas.width=table.offsetWidth；
canvas.height=table.offsetHeight；
功能连接（图像）{
var im=新图像（）；
im.onload=function（）{//确保已加载图像
var tabBcr=table.getBoundingClientRect（）；
var imgBcr=image.getBoundingClientRect（）；
ctx.beginPath（）；
ctx.moveTo（x，y）；
x=imgBcr.left+（image.parentNode.offsetWidth/2）-tabBcr.left；
y=imgBcr.top+（image.parentNode.offsetHeight/2）-tabBcr.top；
ctx.lineTo（x，y）；
ctx.stroke（）；
};
im.src=images[i].src；
}
对于（var i=0；isorry，你的问题不清楚，你能添加相关细节吗？我会更改它，现在更好了？仍然令人困惑。你指的是什么表？数据库表、HTML表还是木制表？哦，只需将HTML表放在绝对定位的div中，并使用CSS将div放在画布元素上。计算你的i在将表格放置到所需位置后，mages会偏移。是的，这是一个html表格（我只是更改了它），好的，我要尝试一下。是的，它也很有效，这就是我试图做的，谢谢！我很困惑，你从哪里得到ctx的x，y。moveTo（）？这与您之前声明的相同？var x，y；//记住坐标？@AliATriple。实例化时，var
x
和
y
为
null
，因此防止在
0,0
处划线。在循环的每一次迭代中，这些变量都会更改为图像中心位置的相应值。最后一次问题，如果想关闭表单，我只需将坐标移动到第一张图像，不是吗？@aliatrple我的代码并不完美，因为它根据加载的图像顺序随机启动…也没有时间改进它，因为您缺乏关于它实际上是如何古怪的信息（HTML、CSS等）.如果你能更好地解释一下你目前的情况，我会更容易些吗？不管怎样，你已经找到了答案！祝你编码愉快
var table = document.getElementById("table");
var images = table.getElementsByTagName("img");
var canvas = document.getElementById("lines");
var ctx = canvas.getContext("2d");
var x, y; // Remember coordinates

canvas.width  = table.offsetWidth;
canvas.height = table.offsetHeight;


function connect( image ) {
  var im = new Image();
  im.onload = function(){ // make sure image is loaded
    var tabBcr = table.getBoundingClientRect();
    var imgBcr = image.getBoundingClientRect();
    ctx.beginPath();
    ctx.moveTo(x, y);
    x = imgBcr.left + (image.parentNode.offsetWidth / 2) - tabBcr.left;
    y = imgBcr.top + (image.parentNode.offsetHeight / 2) - tabBcr.top;
    ctx.lineTo(x, y);
    ctx.stroke();
  };
  im.src = images[i].src;
}


for(var i=0; i<images.length; i++){
  connect( images[i] );
}