在画布上绘制一些效果的时候,会需要用到画布上的鼠标的位置.
会用到的知识点:
1. .getBoundingClientRect(), 这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离
注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。
document.documentElement.clientTop; // 非IE为0,IE为2
document.documentElement.clientLeft; // 非IE为0,IE为2
function gGetRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
封装成一个函数:
var canvas = document.getElementById('canvas');//获取画布对象
var cxt = canvas.getContext('2d');//绘制环境
canvas.addEventListener('mousemove', function(e){
var ev = e || window.event;//兼容性处理
var canvasResult = windowToCanvas(canvas, ev.clientX, ev.clientY);//调用函数, ev.clientX是相对于浏览器窗口左上角的x坐标,ev.clientY是相对于浏览器窗口左上角的y坐标
}, false);
function windowToCanvas(canvas, x, y) {
var canvasBox = canvas.getBoundingClientRect();
var canvasX = Math.abs(x - canvasBox.left);
var canvasY = Math.abs(y - canvasBox.top);
return {x: canvasX, y: canvasY};
}