HTML5 Canvas鼠标与键盘事件

简介: 演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动。 Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(MouseClick), 鼠标按下 (Mouse Down), 鼠标抬起(Mouse Up...

演示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>
觉得不错请支持一些,谢谢!!
目录
相关文章
|
2天前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
16 5
|
4月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
84 0
|
5月前
|
移动开发 前端开发 API
HTML5 Canvas渐进填充与透明
HTML5 Canvas渐进填充与透明
162 7
|
5月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas鼠标与键盘事件
HTML5 Canvas鼠标与键盘事件
56 5
|
5月前
|
移动开发 前端开发 API
HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke)
76 3
|
2月前
|
XML 移动开发 前端开发
HTML5 SVG和canvas的性能探讨
HTML5 中的 SVG(可缩放矢量图形)和 Canvas(画布)分别用于网页图形绘制。SVG 基于矢量图形,使用 XML 描述,适合静态或少量动态内容(如图标、图表),易于编辑且保持高分辨率;Canvas 则基于位图,通过 JavaScript 绘制,更适合快速更新大量图形的场景(如游戏、动态动画),但在复杂图形计算时可能遇到性能瓶颈。总体而言,SVG 适用于静态和少量动态内容,而 Canvas 更适合高频率更新和性能要求高的场景。
|
2月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
|
2月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
3月前
|
Dart 前端开发 Java
|
2月前
|
前端开发
在 HTML canvas 绘制文本
在 HTML canvas 绘制文本
18 0