html5-canvas 检测鼠标在画布上的位置
示例
本示例将说明如何获取鼠标相对于画布的位置，例如(0,0)HTML5Canvas的左上角。的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(); //获取CSSpos，以及宽度/高度
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位置为整数，因为画布的边界矩形可能没有整数位置。
热门推荐
10 感谢韩语老师祝福语简短
11 升职文案高级祝福语简短
12 花童结婚祝福语大全简短
13 向国庆送祝福语简短
14 什么寄语简短祝福语女生
15 客户回礼祝福语大全简短
16 女孩生日祝福语简短创意
17 家长回复节日祝福语简短
18 给外婆敬酒祝福语简短