我想获取画布的X和Y坐标，为此我正在使用this question中建议的解决方案。为了便于参考，以下是我正在使用的功能（包括一些调试警报消息）：
function getCumulativeOffset(obj) {
var left, top;
left = top = 0;
if (obj.offsetParent) {
do {
alert("obj id = " + obj.tagName + " (" + obj.id + ")");
left += obj.offsetLeft;
top += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return {
x : left,
y : top
};
};
但是，我没有得到预期的结果。现在，我已将问题归结为getCumulativeOffset函数，而不是在HTML中获取article标签。这里是相关的HTML：
<body>
<article>
<canvas id="pizza" width="460" height="460">Your browser does not support the HTML5 canvas.</canvas>
</article>
<div id="temp"></div>
</body>
相关的CSS：
article, aside, figure, footer, header, hgroup, nav, section {
display:block
}
body {
font: normal medium 'Gill Sans', 'Gill Sans MT', 'Goudy Bookletter 1911', 'Linux Libertine O', 'Liberation Serif', Candara, serif;
padding: 0;
margin: 0 auto;
width: 40em;
line-height: 1.75;
word-spacing: 0.1em
}
article {
text-align: center;
}
#pizza {
display: inline-block
}
由于某种原因，当我测试该功能时，似乎商品标签不是我期望的画布的offsetParent。这是输出：
obj ID = CANVAS（比萨饼）
bj id = BODY（）
谁能解释一下？
最佳答案
由offsetParent引用的元素是最接近的祖先元素，如果找不到，则有一些返回该元素的规则（在MDN中为offsetParent）。在您的情况下，为position: relative设置<article>应该可以解决问题。