1.1 鼠标事件:
“按下鼠标事件”:
canvas.onmousedown = function(e) {
// react to the mouse down event
}
此外还可以用 addEventListener()方法来注册监听器
canvas.addEventListener('mousedown', function(e) {
// react to the mouse down event
})
除去以上的,还可以使用其他的监听事件。
'onmousedown'比addEventListener用起来简单些,但是如果要向某个鼠标事件注册多个监听器的话,就得使用addEventListener()方法了。
1.1.2将鼠标坐标转换为canvas坐标
浏览器通过事件对象传递给监听器的鼠标坐标,是窗口坐标,而不是对与canvas自身的坐标。
转换工作通过windowToCanvas()来完成。
function windowToCanvas(canvas, x, y) {
var box = canvas.getBoundingClientReact();
return {x:(x-box.left) * (canvas.width / box.width), y : (y-box.top)*(canvas.height/box.height)};
canvas.onmousemove = function(e) {
var loc = windowToCanvas(canvas, e.clientX, e.clientY);
drawBackground();
drawSpritesheet();
drawGuidelines(loc.x,loc.y);
updateReadout(loc.x, loc.y);
}
}