javascript - 用 Canvas 绘制 Javascript

Question

也许你可以建议我，我需要使用图像的坐标作为顶点在 Canvas 上绘制，但是我将图像放入表格(html 表格)中，所以我不知道该怎么做，该怎么做在 table 内部或 table 上方绘制。例如，您有一个坐标为 (60,90) 的图像，另一个坐标为 (79,45) 和另一个坐标为 (70,64)，我需要用该坐标制作一个三 Angular 形，但图像放在一个表格中(每个图像在不同的细胞。这是我的绘制代码:

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 :

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

我把它放在表格代码下面，我在其他函数中调用该函数。如果你能帮助我，那就太好了。谢谢!

Answer 1

希望我能正确理解您的问题:您在实际的 Table 元素 ( <table></table> ) 中有图像，在某些单元格中有图像。您在其下方放置了一个 Canvas ，您想要在其上绘制线条以连接表格中的图像。

要做到这一点，只需从图像的绝对位置中减去 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