怎么获取 canvas 上鼠标的坐标
1个回答
2016-10-21 · 百度知道合伙人官方认证企业
兄弟连教育
兄弟连教育成立于2006年，11年来专注IT职业教育，是国内专业的IT技术培训学校。2016年成功挂牌新三板（股票代码：839467）市值过亿。开设专注程序员培训专注php、Java、UI、云计算、Python、HTML5、
向TA提问
关注
![]()
展开全部
以下程序实现了在canvas上画红色的圆，圆心为鼠标所在位置，其中圆的位置随着鼠标位置的移动而移动，js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标，getCanvasPos(canvas,e)方法用于获取鼠标在canvas上的坐标；canvas以其左上角为起点，并设为(0,0)，因此当页面包含其他元素的时候，两者坐标不一致，不过在本例中两者坐标是一致的，因为页面只包含一个canvas元素：
html代码如下：
[html] view plain copy
<html>
<head></head>
<body>
<div onmousemove="draw(event)" id="testcanvas">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" >
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript" src="abc.js">
</script>
</div>
</body>
</html>
其中abc.js文件中的代码如下：
[javascript] view plain copy
function mousePos(e)
{//获取鼠标所在位置的坐标，相对于整个页面
var x,y;
var e = e||window.event;
return {
x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop
};
}
function getCanvasPos(canvas,e)
{//获取鼠标在canvas上的坐标
var rect = canvas.getBoundingClientRect();
return {
x: e.clientX - rect.left * (canvas.width / rect.width),
y: e.clientY - rect.top * (canvas.height / rect.height)
};
}
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();
}
html代码如下：
[html] view plain copy
<html>
<head></head>
<body>
<div onmousemove="draw(event)" id="testcanvas">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" >
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript" src="abc.js">
</script>
</div>
</body>
</html>
其中abc.js文件中的代码如下：
[javascript] view plain copy
function mousePos(e)
{//获取鼠标所在位置的坐标，相对于整个页面
var x,y;
var e = e||window.event;
return {
x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop
};
}
function getCanvasPos(canvas,e)
{//获取鼠标在canvas上的坐标
var rect = canvas.getBoundingClientRect();
return {
x: e.clientX - rect.left * (canvas.width / rect.width),
y: e.clientY - rect.top * (canvas.height / rect.height)
};
}
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();
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
