在画布中绘制线条的可疑定位

Question

我对HTML 5 Canvas有一些疑问，希望你能帮我清除它们。

情况： 我有一个画布和一些绝对定位的div，它们是相对定位div的子项。

<div class="relativeposition">
    <canvas id="drawarea" height="700" width="800"></canvas>
    <div id="absoluteposition1"></div>
    <div id="absoluteposition2"></div>
    <div id="absoluteposition3"></div>
</div>

所以你可以看到画布和画布上有3个不同的div。现在我想在每个循环中的每个div下绘制一个多边形。该多边形的位置应该几乎位于div的中心。在每个div下，这个位置应该等于其他div。

红色caros是定位的div，只是想象它们在每个div下面都处于同一位置。用于绘制这些caros的伪代码如下：

$.each(absolutepositionedDivs, function(index, value) {
    var divtop = absolutepositionedDiv.position().top;
    var divleft = absolutepositionedDiv.position().left;

    context.beginPath();
    context.moveTo(playerLeft + 76, playerTop + 154);
    context.lineTo(playerLeft + 46, playerTop + 174);
    context.lineTo(playerLeft + 55, playerTop + 190);
    context.lineTo(playerLeft + 97, playerTop + 190);
    context.lineTo(playerLeft + 106, playerTop + 174);
    context.lineTo(playerLeft + 76, playerTop + 154);
    context.closePath();
    context.lineWidth = 2;
    context.strokeStyle = "red";
    context.stroke();
});

画布的初始化等等在代码中没有，但我写了它并且它起作用了。只是忽略抽奖的结果不是一个卡罗......所以现在的问题是所绘制的物体并不处于相同的位置，如下图所示：

所以我不明白为什么每个绘制的物体都有不同的位置，即使我写道它们都是从它们的div的相同位置开始但最终却是不同的。你能告诉我为什么会发生这种情况或者有解决办法将所有绘制的多边形放在他们div下的相同位置吗？

编辑：这是一个小提琴https://jsfiddle.net/asfga/yjjhqpyL/

Answer 1

你的小提琴很乱，所以我需要清理它......

首先，你有跨越HTML javaScript和CSS的幻数，这是一个维护噩梦。所以我将其清理干净并将所有定位信息放入JS文件中，因为它就是需要的地方。

形状是手工编码的，并且没有任何意义的疯狂偏移。因此，使形状成为一个点的数组，其原点位于中心顶部。 （当你不需要的时候关闭路径时，不需要最后一点）。

然后删除了jquery，因为你不需要它而你没有正确使用它，所以有效地减慢了整个页面。

在代码中添加div，因为每次想要进行更改时，手动输入所有内容都要容易得多。在数组中存储div，这样您就不必在以后需要时查询DOM。

您需要画布位置。所以我通过getBoundingClientRect函数得到了它，所以我们可以调整div位置以适合画布坐标。

然后迭代每个div并找到它的左上角getBoundingClientRect减去画布左上角，从而得到该div的画布坐标。然后，当我需要知道背景图像的位置时，我添加了一个函数来加载背景图像并查询其尺寸。

那是是我发现你的问题的时候。

您的背景图片是一张全尺寸图片，已经绘制了所有五边形。它与div没有任何关系，因为你没有剪辑它。除非你的div坐标与图像五边形位置正确匹配，否则你永远不能排列它。

您需要使用图像编辑器并在图像上找到每个五边形。将位置添加为数组并在这些位置绘制形状。

我放弃了这一点，只是在画布上的文字上添加了一个矩形，表明它已排成一行。你将不得不为背景图像锻炼你想要的东西。如果你想要整个图像，你必须手动找到每个五边形的坐标。如果您只想要第一个五边形，请剪切图像并将一个五边形保存为图像。然后取消注释我注释掉的背景位置规则，并将魔术数字偏移量添加到代码中，该代码对于所有div都是常量。

你可以找到由此产生的小提琴here，但它只会在很短的时间内完成，因为我会在你看完之后删除它。