首页 新闻 搜索 专区 学院

javascript求鼠标在canvas画布里的坐标

0
悬赏园豆:20 [已解决问题] 解决于 2018-02-06 10:42
 <canvas id="myCanvas" width="160" height="160" style="border:1px solid #c3c3c3;">
</canvas>
<p id="testid"></p>
<script type = "text/javascript">
function f() {
var n = document.getElementById("myCanvas");
var c = n.getContext("2d");
var ev2 = event || window.event;
var x1 = ev2.PageX||ev2.clientX;
var y1 = ev2.PageY||ev2.clientY;
var x2 = n.offsetLeft;
var y2 = n.offsetTop;
var x = x1 - x2;
var y = y1 - y2;
document.getElementById("testid").innerHTML = "x1="+x1+",y1="+y1+",x2="+x2+",y2="+y2+",x="+x+",y="+y;
}

function f_onload()
{
var c=document.getElementById('myCanvas');
c.onmousedown = f;
c.onmousemove = f;
c.onmouseup = f;
document.onmousemove = null;
document.onmouseup = null;
}

window.onload = f_onload;
</script> 
代码很简单就这么一点,
160X160的一个canvas画布,按理鼠标在画布里的时候,下面显示坐标的x,y都在0~160范围内。
单独用浏览器打开这段程序,很正常。
可是放在博客园的博客侧边栏公告里,x倒正常,y却都负了。。。。。。
现在已经确定是y1的问题,
现在发现是这样的,我只要把网页上下滚动拉到顶,那么就可以得到正确的值。也就是y1得到的不是网页内的坐标,而是网页可视范围上的坐标。
请问y1怎么改,如何才可以得到正确的坐标?
窗户的主页 窗户 | 小虾三级 | 园豆:874
提问于:2018-01-25 23:03
< >
分享
最佳答案
0

搞定

 var n = document.getElementById("myCanvas");
var c = n.getContext("2d");
var ev2 = event || window.event;
var x1 = ev2.PageX||ev2.clientX;
var y1 = ev2.PageY||ev2.clientY;
x1 += document.documentElement.scrollLeft || document.body.scrollLeft;
y1 += document.documentElement.scrollTop || document.body.scrollTop;
var x2 = n.offsetLeft;
var y2 = n.offsetTop;
//var y2 = $(n).offset().top;
var x = x1 - x2;
var y = y1 - y2; 
窗户 | 小虾三级 |园豆:874 | 2018-01-26 11:29
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册