Найти координаты X и Y каждого изображения в ячейке таблицы

Question

Я пытаюсь создать подходящую игру. Я создал левый и правый тд с элементами, которые должны быть сопоставлены. Средний тд содержит холст.

Когда есть правильное совпадение, я хотел бы нарисовать линии на холсте в соответствии с элементами. Для этого мне нужны координаты каждого изображения, а затем сделайте их соответственно на холсте. Ниже приводится иллюстрация

Красных представляет тд Green представляет линию Я хотел бы обратить

Существуют не так много проблем с координатой х, потому что я просто взять ширину (300px) (от 0 до 300), но это координата y, которая является проблемой.

Идея у меня есть

1. Найти координату из picture1

2. Добавить половину точек в picture1 так, что он находится в 'центре' в picture1

3. Do то же самое для изображения2

4. Рисование линии с использованием этих координат

Есть ли способ найти координату y изображения в таблице, потому что она одинаково совпадает с координатой y на холсте?

HTML

<table class="first"> 
    <tr> 
    <td> 
     <ul class="firstleft"></ul> 
    </td> 
    <td> 
     <canvas id="myCanvas" resize></canvas> 
    </td> 
    <td> 
     <ul class="firstright"></ul> 
    </td> 
    </tr> 
</table> 

CSS

table { 
    margin-left: auto; 
    margin-right: auto; 
} 
table ul { 
    list-style-type: none; 
    margin-left: 50px; 
    padding: 0; 
    padding-left: 5px; 
    width: 200px; 
} 

JS

var canvas = document.getElementById('myCanvas'); 
ctx = canvas.getContext("2d") 
ctx.lineWidth = 6; 
ctx.strokeStyle = "#333"; 
/* Drawing part using an example*/ 
ctx.beginPath(); 
ctx.moveTo(100, 250); 
ctx.bezierCurveTo(150, 100, 350, 100, 400, 250); 
ctx.stroke(); 

Answer 1

Вот чрезмерно многословным, не упорядочена бло ck кода для обеспечения ясности. Это также просто делает левую сторону, но, очевидно, вы бы изменить функции, чтобы взять имена и позиции массивов в качестве аргументов, чтобы поддержать левое и правое, и т.д.

var yPositionForMiddleOfEachImage = []; 
var myImageNames = ['leftImage0', 'leftImage1', 'leftImage2']; //etc 

var calculateYValuesForLeftSide = function() { 
    var thisImagesHeight = 0, halfOfImageHeight = 0, totalOfAllPreviousImagesHeight = 0; 
    for (var i = 0; i < myImageNames.length; i++) { 
    thisImagesHeight = document.getElementById(myImageNames[i]).clientHeight; 
    halfOfImageHeight = thisImagesHeight/2; 

    yPositionForMiddleOfEachImage.push(totalOfAllPreviousImagesHeight + halfOfImageHeight); 
    totalOfAllPreviousImagesHeight += thisImagesHeight; 
    } 
}; 

var getCanvasLeftSideYPosition = function (imgPosition) { 
    return yPositionForMiddleOfEachImage[imgPosition]; 
};