canvas进阶(2):canvas与事件处理
一、鼠标事件:将鼠标坐标转换为Canvas坐标
有时候,我们需要给canvas增加事件监听,然而 浏览器通过事件对象传递给监听器的鼠标坐标,是窗口坐标,而不是相对于canvas自身的坐标。大部分情况下,开发者需要知道的是发生鼠标事件的点相对于canvas的位置,而不是在整个窗口中的位置。这个时候就需要我们去做一些转换。
<!DOCTYPE html> <html> <head> <title>canvas和事件</title> <style type="text/css"> body{ background: #ddd; } #canvas{ position: absolute; left:50px; top:50px; cursor: pointer; /*border:thin inset rgba(100,150,230,0.5);*/ } #readout{ margin-top:10px; margin-left:15px; color:blue; } </style> </head> <body> <div id="readout"></div> <canvas id="canvas" width="500" height="250" style="background-color:pink"> 该浏览器不支持canvas! </canvas> <script type="text/javascript"> var myCanvas = document.getElementById(canvas), context = myCanvas.getContext(2d), readout = document.getElementById(readout), spritesheet = new Image(); //浏览器通过事件对象传递给监听器的鼠标坐标,是窗口坐标,而不是相对于canvas自身的坐标。大部分情况下,开发者需要知道的是发生鼠标事件的点相对于canvas的位置,而不是在整个窗口中的位置。 function windowToCanvas(canvas,x,y){//x,y为当前鼠标相对于坐标轴的位置 var bbox=canvas.getBoundingClientRect(); //返回相对于canvas的坐标值 return { x:x-bbox.left*(canvas.width/bbox.width), y:y-bbox.top*(canvas.height/bbox.height) } } myCanvas.onmousemove=function(e){ var loc = windowToCanvas(myCanvas,e.clientX,e.clientY); console.log(loc) } </script> </body> </html>
注:windowToCanvas()方法不只是将canvas边界框的想,y坐标从窗口坐标中减去,而且在canvas元素大小与绘图表面大小不相符的情况下,它还相对这两个坐标进行了缩放。
二、键盘事件
一共有三种键盘事件:keydown、keypress、keyup
canvas是一个不可获取焦点的元素,根据上一讲所说的内容可见在canvas元素上新增键盘事件时徒劳的。如果想要检测键盘事件的话,你应该在document或window对象上新增键盘事件监听器才对。
键盘事件的另一个常见用途就是在游戏之中处理按键动作,例如利用键盘的上、下、左、右按钮来控制canvas游戏中,控制被“人物”的走向。具体的例子将在后续的讲解中介绍。