您现在的位置是：网站首页> 编程资料编程资料
HTML5 Canvas鼠标与键盘事件demo示例如何在Canvas上的图形/图像绑定事件监听的实现如何在Canvas中添加事件的方法示例html5中监听canvas内部元素点击事件的三种方法详解Canvas事件绑定HTML5 Canvas的事件处理介绍一个不错的HTML5 Canvas多层点击事件监听实例详解如何在Canvas中添加事件的方法
2021-09-01
1116人已围观
简介 本文的主要母的是演示HTML5 Canvas鼠标事件，获取Canvas对象上的鼠标坐标，演示键盘事件通过键盘控制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元素实现键盘事件支持
// 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部分：
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元素实现键盘事件支持
复制代码
代码如下:// 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部分：
复制代码
代码如下:HTML Canvas Event Demo - By Gloomy Fish
Press W, A, S, D keys to move
相关内容
- HTML5 Canvas的性能提高技巧经验分享html5教程调用绘图api画简单的圆形代码分享html5教程画矩形代码分享html5教程制作简单画板代码分享html5实现的便签特效(实战分享)用jQuery+CSS3+html5实现的变化的相册效果分享代码HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
- html5 CSS过度-webkit-transition使用介绍html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 仿CSDN Blog返回页面顶部功能实现原理及代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- Html5实现iPhone开机界面示例代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- html5 input属性使用示例详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容AndroidHTML 5 input placeholder 属性如何完美兼任ieHTML5 input元素类型：email及url介绍HTML5输入框下拉菜单功能的示例代码html5实现输入框fixed定位在屏幕最底部兼容性HTML5中input输入框默认提示文字向左向右移动的示例代码
- HTML中使用SVG与SVG预定义形状元素介绍html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- html5贪吃蛇游戏使用63行代码完美实现一款简单的使用键盘按键的Html5贪吃蛇特效HTML5 贪吃蛇游戏实现思路及源代码基于html5实现的愤怒的小鸟网页游戏特效源码基于HTML5实现的捕鱼达人网页游戏动画特效源码HTML5实现的网页游戏太空战机源码驴子跳游戏 HTML5+CSS3网页游戏源码HTML5 Javascript 五彩连珠网页游戏 脚本 基于HTML5制作贪吃蛇游戏(手机网页版)
- 通过Canvas及File API缩放并上传图片完整示例详解如何用HTML5 Canvas API控制图片的缩放变换HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公
- HTML5新增的Css选择器、伪类介绍html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- HTML5 自动聚焦(autofocus)属性使用介绍html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
