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

   }

}

猜你喜欢

转载自blog.csdn.net/u014085502/article/details/90022724