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 12 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 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正则表达式(regar expression)
2011/09/10 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php基本函数汇总
2015/07/09 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
python使用Tesseract库识别验证
2018/03/21 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python实现AES加密与解密
2019/03/28 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
什么是lambda函数
2013/09/17 面试题
采购员岗位职责
2013/11/15 职场文书
园林施工员岗位职责
2013/12/11 职场文书
节能宣传周活动总结
2014/05/08 职场文书
法定代表人身份证明书
2014/09/10 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Mysql MVCC机制原理详解
2021/04/20 MySQL
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android