canvas之鼠标事件

canvas的鼠标事件无法直接获取鼠标在canvas上的坐标，所获得的坐标是相对于整个屏幕的坐标，所以，想得到鼠标在canvas上的坐标时，就必须进行转换。

使用getBoundingClientRect方法，得到canvas在屏幕上的位置及大小信息：

ClientRect {height: 300, width: 1350, left: 8, bottom: 486, right: 1358…}
bottom: 486
height: 300
left: 8
right: 1358
top: 186
width: 1350
__proto__: ClientRect

通过当前鼠标的坐标和ClientRect的信息对比，得出鼠标在canvas上的位置：

function getPointOnCanvas(canvas, x, y) { 
			var bbox =canvas.getBoundingClientRect(); 
			return { x: Math.round((x- bbox.left )*(canvas.width / bbox.width)), 
					 y: Math.round((y - bbox.top) * (canvas.height / bbox.height)) 
			}; 
		} 

demo的源代码如下：

演示canvas的鼠标事件
Canvas上鼠标事件中不能直接获取鼠标在Canvas的坐标，所获取的都是基于整个屏幕的坐标
MOVE 鼠标坐标:
DOWN 鼠标坐标:
UP 鼠标坐标:

效果图如：