39,084
社区成员
发帖
与我相关
我的任务
分享请问如何去获取canvas到浏览器的距离
我的代码是这样的：
<body>
<div id="divId">
<canvas id="tabletId" height="500px" width="500px"></canvas>
</div>
</body>
然后在js中获取canvas到浏览器的距离是这么写的：
var canvas = document.getElementById("tabletId");
var ctx = canvas.getContext("2d");
var height = canvas.offsetTop;
var width = canvas.offsetLeft;
console.log(width + "------" + height);
执行出来的结果是0 ----- 0。
这是为什么呀？求教
<body>
<div id="divId">
<canvas id="tabletId" height="500px" width="500px"></canvas>
</div>
</body>
然后在js中获取canvas到浏览器的距离是这么写的：
var canvas = document.getElementById("tabletId");
var ctx = canvas.getContext("2d");
var height = canvas.offsetTop;
var width = canvas.offsetLeft;
console.log(width + "------" + height);
执行出来的结果是0 ----- 0。
这是为什么呀？求教
...全文
请发表友善的回复…
发表回复
海绵没有宝宝 2017-11-24
- 打赏
- 举报
感谢~qq_34353572
对于这个offsetTop这些还比较不懂，
现在改成了
var height = canvas.offsetParent.offsetTop;
var width = canvas.offsetParent.offsetLeft;
可以获取了~
RealNeol 2017-11-17
- 打赏
- 举报
根据你的问题我查了一下：
offsetTop：获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。
也就是说，你的id为 divId的元素一定有定位，relative或者absolute或者fixed，offsetTop根据divId元素进行定位就是0；
建议改成：
var divId = document.getElementById("divId");
var canvas = document.getElementById("tabletId");
var ctx = canvas.getContext("2d");
var height = divId.offsetTop;
var width = divId.offsetLeft;
console.log(width + "------" + height);
