獲取cavans坐標或者頁面鼠標坐標
阿新 • • 發佈：2019-05-08
padding lose tex gin can div adding scroll mov <html>
<head>
<style type="text/css">
body{
margin: 0;
padding: 0;
} .my-canvas{
margin: 20px;
border:10px solid #c3c3c3; }
</style>
</head>
<body>
<div onmousemove="draw(event)" id="testcanvas">
<canvas id="myCanvas" class="my-canvas" width="200" height="100" >
</canvas>
<span id="test"></span>
<script type="text/javascript">
function mousePos(e)
{//獲取鼠標所在位置的坐標，相對於整個頁面
var x,y;
var e = e||window.event;
return {
x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft,
};
}
function getStyles(obj){
return document.defaultView.getComputedStyle(obj); }
function getCanvasPos(canvas,e) {
//獲取鼠標在canvas上的坐標
var rect = canvas.getBoundingClientRect();
//獲取的是樣式，需要轉換為數值
var topB = parseInt(getStyles(canvas).borderTopWidth);
return {
x: (e.clientX - rect.left) - leftB,
y: (e.clientY - rect.top) - topB
};
}
function draw(e)
{
/*var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.clearRect(0,0,c.width,c.height);
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(mousePos(e).x,mousePos(e).y,15,0,Math.PI*2,true);
cxt.arc(getCanvasPos(c,e).x,getCanvasPos(c,e).y,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill(); */
var c=document.getElementById("myCanvas");
var s=document.getElementById("test");
s.innerText= getCanvasPos(c,e).x+" "+getCanvasPos(c,e).y;
}
</script>
</div>
</body>
</html>
<head>
<style type="text/css">
body{
margin: 0;
padding: 0;
} .my-canvas{
margin: 20px;
border:10px solid #c3c3c3; }
</style>
</head>
<body>
<div onmousemove="draw(event)" id="testcanvas">
<canvas id="myCanvas" class="my-canvas" width="200" height="100" >
</canvas>
<span id="test"></span>
<script type="text/javascript">
function mousePos(e)
{//獲取鼠標所在位置的坐標，相對於整個頁面
var x,y;
var e = e||window.event;
return {
x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft,
};
}
function getStyles(obj){
return document.defaultView.getComputedStyle(obj); }
function getCanvasPos(canvas,e) {
//獲取鼠標在canvas上的坐標
var rect = canvas.getBoundingClientRect();
//獲取的是樣式，需要轉換為數值
var topB = parseInt(getStyles(canvas).borderTopWidth);
return {
x: (e.clientX - rect.left) - leftB,
y: (e.clientY - rect.top) - topB
};
}
function draw(e)
{
/*var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.clearRect(0,0,c.width,c.height);
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(mousePos(e).x,mousePos(e).y,15,0,Math.PI*2,true);
cxt.arc(getCanvasPos(c,e).x,getCanvasPos(c,e).y,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill(); */
var c=document.getElementById("myCanvas");
var s=document.getElementById("test");
s.innerText= getCanvasPos(c,e).x+" "+getCanvasPos(c,e).y;
}
</script>
</div>
</body>
</html>
獲取cavans坐標或者頁面鼠標坐標