html5-canvas 检测鼠标在画布上的位置
示例
本示例将说明如何获取鼠标相对于画布的位置，例如(0,0)HTML5 Canvas的左上角。的e.clientX和e.clientY将获得相对于文档的顶部位置的鼠标，来改变这种是基于画布的顶部，我们减去left，并right从客户端X和Y的画布位置
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";
canvas.addEventListener("mousemove", function(e) {
var cRect = canvas.getBoundingClientRect(); // 获取CSS pos，以及宽度/高度
var canvasX = Math.round(e.clientX - cRect.left); // 减去画布的“左”
var canvasY = Math.round(e.clientY - cRect.top); // 从X / Y位置
ctx.clearRect(0, 0, canvas.width, canvas.height); // (0,0)画布的左上方
ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});
可运行的例子
之所以使用，Math.round是因为要确保x,y位置为整数，因为画布的边界矩形可能没有整数位置。
-
问题内容： 我想使用鼠标在HTML画布上绘制（例如：绘制签名，绘制名称…） 请帮我怎么办？请提供一些源代码。谢谢 问题答案： 这是一个工作示例。
-
问题内容： 我正在尝试用鼠标在HTML5画布上绘制，但是似乎正常工作的唯一方法是，如果出于某种原因，如果我更改了画布位置，那么画布是否位于0,0（左上角）的位置它的绘制效果不理想。这是我的代码。 HTML部分 我已经读过一种方法可以在JavaScript中创建一个简单的函数来获得正确的位置，但是我不知道该怎么做。 问题答案： 简单的1：1方案 对于canvas元素与位图大小相比为1：1的情况，可以
-
问题内容： 尝试使用awt canvas上的鼠标来绘制图形（目前为线）。Iam首次尝试Java图形。所以不确定如何去做。这是我的第一次尝试： 问题：1）将窗口最小化并还原后，绘制的线条消失了（由于要重新绘制）2）我要的是该线条应跟随鼠标移动（拖动时）。最后一行应该从按下位置到释放鼠标的位置。现在请礼节，当鼠标移动时，将绘制新的线条。我不确定如何清除画布上的中间线。 有人可以帮我解决这些问题吗？ 问
-
https://developer.mozilla.org/en/Canvas_tutorial/Transformations http://en.wikipedia.org/wiki/Spirograph 移植一个HTML5画布图像到QML画布非常简单。在成百上千的例子中，我们选择了一个来移植。 螺旋图形（Spiro Graph） 我们使用一个来自Mozila项目的螺旋图形例子来作为我们的基础
-
问题内容： 有没有一种方法可以将位置鼠标插入标签？我想要相对于而不是整个页面右上角的位置。 问题答案： 最简单的方法可能是向canvas元素添加onmousemove事件侦听器，然后您可以从事件本身获取相对于画布的坐标。 如果您只需要支持特定的浏览器，则完成此任务很简单，但是f.ex之间存在差异。Opera和Firefox。 像这样的东西应该适用于这两个：
-
现在我有一个应用程序，可以让用户单击按钮浏览用作画布背景的图片。我想这样做，如果用户单击画布上的某个地方，则在该点放置一个节点。我假设我需要获取鼠标坐标。有没有一个简单的方法可以调用将节点放置在鼠标单击位置，或者我必须在这个链接中选择路线：WPF-使用鼠标事件在画布上绘图？提前谢谢。 编辑：添加了我尝试制作椭圆的代码。不过它不起作用，而且我不确定如何使用鼠标点击椭圆的坐标。我知道对于一行来说，它只