html 重置画布坐标系,6.2 使用画布鼠标坐标 - HTML5 Canvas 实战

我们体验一下Events类吧！为了使其尽量简单，我们使用Events类的getMousePos()获取鼠标光标的坐标，并在画布的左上角显示出来。getMousePos()方法返回相对于画布的坐标，它会考虑画布相对于页面的偏移，以及页面的滚动位置。

图6-1 画布坐标系

操作步骤

按照以下步骤，在每次鼠标移动时，获取画布上的鼠标坐标，并在画布的左上角显示出来：

1. 链接到Events类：

2. 定义writeMessage()函数，该函数输出一条消息：

function writeMessage(context, message){

context.font  = "18pt Calibri";

context.fillStyle  = "black";

context.fillText(message,  10,  25);

}

3. 实例化一个Events对象，并获取画布及上下文对象：

window.onload  = function(){

var events  = new Events("myCanvas");

var canvas  = events.getCanvas();

var context  = events.getContext();

4. 当用户鼠标移出画布，清除画布并输出“Mouseover me!”消息：

canvas.addEventListener("mouseout", function(){

events.clear();

writeMessage(context, "Mouseover me!"); }, false);

5. 当用户在画布内移动鼠标，清除画布并输出鼠标位置：

canvas.addEventListener("mousemove", function(){

var mousePos  = events.getMousePos();

events.clear();

if  (mousePos  !== null)  {

message  = "Mouse position: "  + mousePos.x  + ","  + mousePos.y;

writeMessage(context, message);

}

}, false);

6. 启动监听事件：

// 如果没有设置stage函数，我们必须手动启动事件监听

events.listen();

7. 用户开始前，输出初始消息：

writeMessage(context, "Mouseover me!");

};

8. 在HTML文档的body部分嵌入canvas标签：

工作原理

页面加载完成后，我们可以实例化一个Events对象，以便拥有getMousePos()方法的访问权。接下来，我们可以给canvas对象附加mouseout事件监听器，该事件会显示“Mouseover me!”消息，并给canvas对象附加mousemove事件监听器，它会调用getMousePos()方法来获取鼠标位置，并输出其坐标。最后，我们可以使用listen()方法启动监听。