`
jishublog
  • 浏览: 862111 次
文章分类
社区版块
存档分类
最新评论

HTML5 Canvas鼠标与键盘事件

 
阅读更多

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

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


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

		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>
觉得不错请支持一些,谢谢!!
分享到:
评论

相关推荐

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

    本文的主要母的是演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动,感兴趣的朋友可以参考下哈,希望对大家有所帮助

    HTML5 Canvas核心技术 图形、动画与游戏开发

    9 1.4 开始学习html5 10 1.4.1 规范 10 1.4.2 浏览器 11 1.4.3 控制台与调试器 11 1.4.4 性能 13 1.5 基本的绘制操作 15 1.6 事件处理 18 1.6.1 鼠标事件 18 1.6.2 键盘事件 22 .1.6.3 触摸事件 23 1.7 ...

    利用HTML5 Canvas制作键盘及鼠标动画的实例分享

    主要介绍了利用HTML5 Canvas制作键盘及鼠标动画的实例,文中分别分享了一个键盘控制的小球移动和鼠标触发的小丑小脸例子,需要的朋友可以参考下

    HTML5 CANVAS游戏开发实战(PDF和源代码)

    HTML5 CANVAS游戏开发实战(PDF和源代码) 第一部分 准备工作篇 第1章 准备工作 / 2 1.1 html5介绍 / 2 1.1.1 什么是html5 / 2 1.1.2 html5的新特性 / 2 1.2 canvas简介 / 5 1.2.1 canvas标签的历史 / 5 ...

    HTML5 Canvas Google电吉他 支持键盘弹奏

    这是当年Google为纪念莱斯·保罗而设计的Google首页Logo,它利用HTML5技术实现了电吉他弹奏...这款HTML5电吉他不仅可以鼠标滑过琴弦发出音乐声,而且可以利用键盘来弹奏出美妙的乐章,懂音律的朋友可以弹奏一下试试。

    在基于HTML5Canvas的游戏中处理用户输入

    学习如何处理键盘和鼠标事件,如何阻止Web浏览器的默认事件行为,以及如何向游戏对象的某种逻辑表示传播事件。此外,还将学习如何处理iPhone和iPad等移动设备上与设备无关的(device-agnostic)输入。令拥有Flash或...

    HTML5 Canvas实现水滴效果代码.zip

    HTML5 Canvas实现水滴效果代码是一款惊艳的Canvas水滴效果,双击可以把水滴分离;拖放到一起可以融合;晃动浏览器可以让水滴跳动;键盘左右键可以切换皮肤;上下键可以变换大小。

    SpaceTrash:HTML5 Canvas 2d 游戏

    为了使游戏编程更容易,我们构建了一个小框架,它处理: 动画鼠标事件键盘事件碰撞,几乎像素完美自定义图形控制器同质转化级别序列化和持久化游戏玩法你有一艘太空船,你的目标是到达某个星球和/或收集一些垃圾。...

    你从未见过的 HTML5 动画效果

    HTML5 的 Canvas 对象将改变 JavaScript 的使命,使之成为 HTML5 下强大的动画脚本编写工具。本文介绍了 8 个你从未见过的,基于 HTML5 Canvas 和 JavaScript 的动画,这些令人难以置信的效果将使你对 HTML5 彻底...

    tetris:HTML5 和 Canvas 中的俄罗斯方块

    使用 Canvas 在 HTML5 中实现完整的俄罗斯方块。 该游戏具有自定义音效(主要是为了让我儿子发笑)和您喜欢的标准俄罗斯方块游戏。 去做 修复评分错误,您没有获得多行的乘数 修复声音错误,如果触发多个声音,你...

    canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器

    我将尝试通过创建一系列教程来解决此问题,以说明文本编辑器的所有重要方面,同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表: 键盘光标导航和选择; ...

    PewJS:PewJS 是一个用于游戏和动画的小型 HTML5 Canvas 框架

    ##PewJS PewJS 是一个用于游戏和动画的小型 HTML5 Canvas 框架。 为什么 ? 我最近一直在用 canvas/js 进行大量实验,发现自己...捕捉键盘输入事件、鼠标事件和光标位置 它没有什么: 为你编程游戏 你的衣服 链接:

    Simple-HTML5-Game-Engine:用于 2D 游戏的简单易用的 HTML5 Canvas 引擎

    用于 2D 游戏的简单易用的 HTML5 Canvas 引擎。 您可以添加文本、按钮、恶意并将它们分组。 如前所述,这是一个非常简单的游戏引擎,但可以轻松扩展。 示例: : 特征 该游戏引擎旨在制作快速的 2D 游戏。 游戏 多...

    canvas:使用WebSocket在服务器浏览器中的Web浏览器中HTML 2D画布上绘制

    反过来,客户端将键盘,鼠标和触摸事件发送到服务器。 该模块不需要特定于操作系统的后端或Cgo绑定。 它不使用WebAssembly,这意味着Go代码在服务器端而不是浏览器中运行。 客户-服务器设计意味着可以将画布显示在...

    Web-Breakout-Game-Kit:准备修改游戏套件以创建突破游戏的方法可在HTML5 Canvas上使用

    通过调用index.html文件中包含的函数来修改游戏(通过创建脚本标签)输入: 鼠标:移动指针仅用于使桨叶移动到X位置, 键盘:A / D或左/右要求: 很少有Javascript知识可以用来修改工具包以创建突破游戏,但是对于...

    KineticJS 史上最全教程+API

    KineticJS首先是要绑定到HTML页面上的一个DOM容器元素上,比如最...用户还可以给这些层上的图形、元素组、层本身以及舞台本身添加事件监听方法,以响应鼠标、键盘等事件。浏览器最终显示的就是这些用户层的叠加效果。

Global site tag (gtag.js) - Google Analytics