演示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鼠标与键盘事件的更多相关文章

  1. C#/winform 自动触发鼠标、键盘事件

    要在C#程序中触发鼠标.键盘事件必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// ...

  2. Selenium WebDriver 中鼠标和键盘事件分析及扩展(转)

    本文将总结 Selenium WebDriver 中的一些鼠标和键盘事件的使用,以及组合键的使用,并且将介绍 WebDriver 中没有实现的键盘事件(Keys 枚举中没有列举的按键)的扩展.举例说明 ...

  3. java鼠标与键盘事件监听

    package cn.stat.p3.windowdemo; import java.awt.Button; import java.awt.FlowLayout; import java.awt.F ...

  4. OSX 鼠标和键盘事件

    本文转自:http://www.macdev.io/ebook/event.html 事件分发过程 OSX 与用户交互的主要外设是鼠标,键盘.鼠标键盘的活动会产生底层系统事件.这个事件首先传递到IOK ...

  5. tkinter中鼠标与键盘事件(十五)

    鼠标与键盘事件 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("300x200+ ...

  6. 50-用Python监听鼠标和键盘事件

    转自:https://www.cnblogs.com/qiernonstop/p/3654021.html 用Python监听鼠标和键盘事件 PyHook是一个基于Python的“钩子”库,主要用于监 ...

  7. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  8. C# 自动触发鼠标、键盘事件

    要在C#程序中触发鼠标.键盘事件必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// ...

  9. 使用Robot类模拟鼠标、键盘事件

    Robot类用于模拟鼠标.键盘事件,生成本机系统输入事件.Robot 的主要用于自动化.自运行的程序和其他需要自动控制鼠标和键盘的程序 相当于实际操作的效果,不仅仅只是生成对应的鼠标.键盘事件.比如R ...

随机推荐

  1. 状态压缩动态规划 -- 棋盘问题 POJ 1321

    一个 N * N 的棋盘上面,有些格子不能放,放置 M 的棋子, 每两个棋子不能在同一行或者同一列,问有多少种放法 DFS太慢,用SCR好点点 Python 仅仅有 22 行,事实上能够更短.可是得排 ...

  2. js基础语法(一)

    学习网站参考:http://www.w3school.com.cn/ 写入html输出: document.write('test out put'); 例子: http://www.w3school ...

  3. Twenty Newsgroups Classification实例任务之TrainNaiveBayesJob(一)

    接着上篇blog,继续看log里面的信息如下: + echo 'Training Naive Bayes model' Training Naive Bayes model + ./bin/mahou ...

  4. Kali Linux 装好系统后安装经常使用软件

    1.配置软件源  leafpad /etc/apt/source.list or(recommand): #官方源 deb http://http.kali.org/kali kali main no ...

  5. hive编程指南--employees表数据定义

    hive编程指南中有个employees表,默认的分隔符比較繁杂,编辑起来不太方便(普通编辑器编辑的控制字符^A等被当成字符串处理了,没有起到分隔符的作用). 收集的解决方式例如以下: http:// ...

  6. cocos2d-x-lua基础系列教程四(lua多继承)

    lua - 多继承 1,模拟伪继承 新建extend_test.lua 新建extend_test.lua setmetable(a,b) b对象是a 对象的父类 a继承于b Account = { ...

  7. Codeforces Round #309 (Div. 2) C

    题意: 就是给出总共同拥有k种颜色.每种颜色有ki种,排列必须满足第i+1种的最后一种颜色必须在第i种最后一种颜色的后面,其它颜色任意.总共同拥有多少种排列点的方法. 分析: 如果d[i]表示前i种的 ...

  8. bootstrap css选择不同的宽度

    刚开始使用bootstrap css开源项目.遇到一个问题,默认的input 宽度太大,需要找小一点的. 其实只需要在input tag中选用预定义的较小的宽度即可.比如: <input typ ...

  9. nginx &amp; flup &amp; django &amp; python3.x @ window7配置备忘录

    最近考虑原Prism建筑(非职业.半专业人士认为C/S建筑)至B/S迁移,主要是由于部署问题,包括两个因素:已经做,虽然一键安装和部署的一个因素,心存顾虑,虽然我一再声明这是一个绿色软件.还有一个因素 ...

  10. tasklet和workqueue的选择

    linux内核设计与实现page127中有个比較,内容比較多.概括一下就是1. tasklet不能休眠, 2. 不须要休眠tasklet效率更高 3.有休眠仅仅能workqueue (1)假设不须要休 ...