演示html5 canvas鼠标事件，获取canvas对象上的鼠标坐标，演示键盘事件通过键盘控制canvas上对象移动。

canvas对象支持所有的javascript的鼠标事件，包括鼠标点击(mouseclick), 鼠标按下(mouse down), 鼠标抬起(mouse up),鼠标移动( mouse move)对canvas添加鼠标事件方式有两种，一种方式是通过api来完成：

复制代码代码如下:

// mouse event

canvas.addeventlistener("mousedown",domousedown,false);

canvas.addeventlistener('mousemove', domousemove,false);

canvas.addeventlistener('mouseup', domouseup, false);

另外一种方式在javascript中称为反模式：

复制代码代码如下:

canvas.onmousedown = function(e){

}

canvas.onmouseup = function(e){

}

canvas.onmousemove = function(e){

}

获取鼠标在canvas对象上坐标：

由于canvas上鼠标事件中不能直接获取鼠标在canvas的坐标，所获取的都是基于整个

屏幕的坐标。所以通过鼠标事件e.pagex与e.pagey来获取鼠标位置，然后通过

canvas. getboundingclientrect()来获取canvas对象相对屏幕的相对位置，通过计算

得到鼠标在canvas的坐标，代码如下：

复制代码代码如下:

function getpointoncanvas(canvas, x, y) {

var bbox =canvas.getboundingclientrect();

return { x: x- bbox.left *(canvas.width / bbox.width),

y:y - bbox.top * (canvas.height / bbox.height)

};

}

键盘事件：

html5 canvas本身不支持键盘事件监听与获取，常用的有两种方法来解决这个问题：

一：通过windows对象来实现canvas键盘事件监听与处理

// key event - use window as object

window.addeventlistener('keydown', dokeydown,true);

二：通过在canvas对象上添加其它支持键盘事件的dom元素实现键盘事件支持

复制代码代码如下:

// key event - use dom element asobject

canvas.addeventlistener('keydown', dokeydown,true);

canvas.focus();

其中tabindex为html5 dom元素，支持键盘事件。

演示，一个可以根据键盘上下左右移动的矩形块:

 

一个完整的鼠标与键盘事件演示代码如下：

复制代码代码如下:

var tempcontext = null; // global variable 2d context

var started = false;

var mtext_canvas = null;

var x = 0, y =0;

window.add

window.onload = function() {

var canvas = document.getelementbyid("event_canvas");

console.log(canvas.parentnode.clientwidth);

canvas.width = canvas.parentnode.clientwidth;

canvas.height = canvas.parentnode.clientheight;

if (!canvas.getcontext) {

console.log("canvas not supported. please install a html5 compatible browser.");

return;

}

// get 2d context of canvas and draw rectangel

tempcontext = canvas.getcontext("2d");

tempcontext.fillstyle="blue";

x = canvas.width/2;

y = canvas.height/2;

tempcontext.fillrect(x, y, 80, 40);

// key event - use dom element as object

canvas.addeventlistener('keydown', dokeydown, true);

canvas.focus();

// key event - use window as object

window.addeventlistener('keydown', dokeydown, true);

// mouse event

canvas.addeventlistener("mousedown", domousedown, false);

canvas.addeventlistener('mousemove', domousemove, false);

canvas.addeventlistener('mouseup', domouseup, false);

}

function getpointoncanvas(canvas, x, y) {

var bbox = canvas.getboundingclientrect();

return { x: x - bbox.left * (canvas.width / bbox.width),

y: y - bbox.top * (canvas.height / bbox.height)

};

}

function dokeydown(e) {

var keyid = e.keycode ? e.keycode :e.which;

if(keyid === 38 || keyid === 87) { // up arrow and w

clearcanvas();

y = y - 10;

tempcontext.fillrect(x, y, 80, 40);

e.preventdefault();

}

if(keyid === 39 || keyid === 68) { // right arrow and d

clearcanvas();

x = x + 10;

tempcontext.fillrect(x, y, 80, 40);

e.preventdefault();

}

if(keyid === 40 || keyid === 83) { // down arrow and s

clearcanvas();

y = y + 10;

tempcontext.fillrect(x, y, 80, 40);

e.preventdefault();

}

if(keyid === 37 || keyid === 65) { // left arrow and a

clearcanvas();

x = x - 10;

tempcontext.fillrect(x, y, 80, 40);

e.preventdefault();

}

}

function clearcanvas() {

tempcontext.clearrect(0, 0, 500, 500)

}

function domousedown(event) {

var x = event.pagex;

var y = event.pagey;

var canvas = event.target;

var loc = getpointoncanvas(canvas, x, y);

console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");

tempcontext.beginpath();

tempcontext.moveto(loc.x, loc.y);

started = true;

}

function domousemove(event) {

var x = event.pagex;

var y = event.pagey;

var canvas = event.target;

var loc = getpointoncanvas(canvas, x, y);

if (started) {

tempcontext.lineto(loc.x, loc.y);

tempcontext.stroke();

}

}

function domouseup(event) {

console.log("mouse up now");

if (started) {

domousemove(event);

started = false;

}

}

html部分：

复制代码代码如下:

html canvas event demo - by gloomy fish

press w, a, s, d keys to move