一、鼠标事件：将鼠标坐标转换为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元素大小与绘图表面大小不相符的情况下，它还相对这两个坐标进行了缩放。
说到这里，需要介绍一下什么是canvas元素的大小和绘图表面的大小，可以看一下笔者的上一篇博客： canvas进阶（1）：Canvas元素大小与绘图表面大小的区别。
二、键盘事件
一共有三种键盘事件：keydown、keypress、keyup
canvas是一个不可获取焦点的元素，根据上一讲所说的内容可见在canvas元素上新增键盘事件时徒劳的。如果想要检测键盘事件的话，你应该在document或window对象上新增键盘事件监听器才对。
键盘事件的另一个常见用途就是在游戏之中处理按键动作，例如利用键盘的上、下、左、右按钮来控制canvas游戏中，控制被“人物”的走向。具体的例子将在后续的讲解中介绍。
2476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
