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 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 HTML / CSS
css弧边选项卡的项目实践
May 07 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 array_slice函数的使用以及参数详解
2008/08/30 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
大学新闻系自荐书
2014/05/31 职场文书
横幅标语大全
2014/06/17 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
高三数学教学反思
2016/02/18 职场文书
react 路由Link配置详解
2021/11/11 Javascript
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers