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 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
javascript 框架小结 个人工作经验
2009/06/13 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
浅谈Python的垃圾回收机制
2016/12/17 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
生日派对邀请函
2014/01/13 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
英文演讲稿
2014/05/15 职场文书
劳动竞赛口号
2014/06/16 职场文书
工人先锋号申报材料
2014/12/29 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis