HTML5 Canvas鼠标与键盘事件demo示例


Posted in HTML / CSS onJuly 04, 2013

演示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元素实现键盘事件支持

复制代码
代码如下:

<canvas id="event_canvas"tabindex="0"></canvas>
// key event - use DOM element asobject
canvas.addEventListener('keydown', doKeyDown,true);
canvas.focus();

其中tabindex为HTML5 DOM元素,支持键盘事件。
演示,一个可以根据键盘上下左右移动的矩形块:
HTML5 Canvas鼠标与键盘事件demo示例 
一个完整的鼠标与键盘事件演示代码如下:
复制代码
代码如下:

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部分:
复制代码
代码如下:

<body>
<h1>HTML Canvas Event Demo - By Gloomy Fish</h1>
<pre>Press W, A, S, D keys to move</pre>
<div id="my_painter">
<canvas id="event_canvas" tabindex="0"></canvas>
</div>
</body>
HTML / CSS 相关文章推荐
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 #HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 #HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 #HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 #HTML / CSS
html5 input属性使用示例
Jun 28 #HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 #HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 #HTML / CSS
You might like
十天学会php之第四天
2006/10/09 PHP
构建简单的Webmail系统
2006/10/09 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
不要用强制方法杀掉python线程
2017/02/26 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
python中pika模块问题的深入探究
2018/10/13 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
python3实现字符串操作的实例代码
2019/04/16 Python
python实现小球弹跳效果
2019/05/10 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
python的数学算法函数及公式用法
2020/11/18 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
露营世界:Camping World
2017/02/02 全球购物
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
中专自荐信
2013/10/13 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
上党课的心得体会
2014/09/02 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
2015年纪委工作总结
2015/05/13 职场文书
小孩不笨观后感
2015/06/03 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
使用nginx配置访问wgcloud的方法
2021/06/26 Servers