canvas - 基础知识 - 事件处理

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);

   }

}

1.2 键盘事件

当在浏览器窗口中按下某个键时，浏览器将会生成键盘事件。这些事件发生在当前拥有焦点的HTML元素身上。如果元素没有焦点，那么事件的发生将会上移至windows与document对象。

canvas是一个不可获取焦点的元素。

一共有三种键盘事件：

keydown

keypress

keyup

 

1.3 在canvas中使用html元素

css规范中规定：采用绝对定位方式的元素将被绘制在采用相对定位方式的元素之上。