HTML将canvas画布鼠标事件,HTML5 Canvas鼠标与键盘事件demo示例
演示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部分:
复制代码代码如下:
html canvas event demo - by gloomy fish
press w, a, s, d keys to move
HTML将canvas画布鼠标事件,HTML5 Canvas鼠标与键盘事件demo示例相关推荐
- html5 移动画布,html5画布移动元素(html5 canvas move element)
html5画布移动元素(html5 canvas move element) 我正在用HTML5和JS开发赛车游戏. 我正在尝试使用箭头键移动汽车. 但它不起作用. 如何移动画布中的元素,并且在移动元 ...
- 773-780---DOM事件高级(常用鼠标事件,案例:跟随鼠标的天使,常用的键盘事件,案例:模拟京东按键输入内容,案例:模拟京东快递单号查询)
文章目录 事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象 案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表 案例 ...
- html5教程鼠标,利用HTML5 Canvas制作键盘及鼠标动画的实例分享
键盘控制小球移动 众所周知,我们所看到的动画实际上就是一系列静态画面快速切换,从而让肉眼因视觉残像产生了「画面在活动」的视觉效果.明白了这一点后,在canvas上绘制动画效果就显得比较简单了.我们只需 ...
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
- 前端实现可绘制的canvas画布_HTML5 如何创建Canvas画布
本节我们来学习如何创建 Canvas 画布. 标签是 HTML5 中新增的标签,通过使用 JavaScript 中的脚本来绘制图形.在页面上放置一个 canvas 元素,就相当于在页面上放置了一块画布 ...
- html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图 太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
- 前端实现可绘制的canvas画布_JS前端基于canvas给图片添加水印
前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前端实现 ...
- html5 canvas详解 pdf,html5 canvas教程 pdf
html5 canvas教程 pdf [2021-02-18 05:30:56] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(&q ...
- html5 canvas画文本框,HTML5 canvas绘制文本
HTML5的canvas也提供渲染文本的方法. (1)绘制文本方法:fillText和strokeText fillText(text,x,y[,maxWidth]) 在指定的(x,y)位置填充指定的 ...
最新文章
- CentOS6.9中搭建FTP服务器
- 如何在大学和工作后让自己逐渐变强?
- 中国工科计算机专业,中国最受欢迎的4个工科专业,第1名有些意外,第3名副其实...
- Python中的基本函数及其常用用法简析
- 根据需要通过代码的方式加载js文件
- 先进的NumPy数据科学
- Maven学习记录之maven基本操作命令,maven本地工厂的创建,maven骨架的生成,以及在eclipse中创建maven工程:...
- access驱动程序_Linux驱动程序学习二 (续) scull 源码在内核5.4.0上的编译调试
- 小说中场景的功能_场景在小说中的作用
- yiilite.php,YII Framework学习教程-YII的V-view的render若干函数-2011-11-17 | 学步园
- matlab中 s 函数简记
- 申请了:苹果已经在测试“毫米波”5G技术
- 魅族17将配备GaN氮化镓充电器:快充安全又高效
- Jsp+Servlet +Mysql实现的新闻发布管理系统
- php 赋予变量现在时间,PHP关于变量和日期处理的面试题
- hastable与dictionary
- 新出炉的面试题,了解一下?
- 整理:周鸿祎谈如何写商业计划书
- python 10的次方_python e次方
- ztree树默认根据ID默认选中该条数据
热门文章
- Vue 绑定使用 touchstart touchmove touchend
- lol德玛西亚服务器未响应,英雄联盟德玛西亚之力盖伦线上无赖攻略
- 显示硬件发展与视频开发系列(2)----2D时代
- 2011年.NET面试题总结---献给即将找工作的同行们 .
- 计算机网络管理员 职业技能鉴定,国家职业技能鉴定·操作技能强化训练:计算机网络管理员(国家职业资格四级)(学生取证专用)...
- form的表单序列化
- h5(微信sdk/企信sdk)页面跳转微信小程序,监听微信小程序关闭事件,已解决
- EXC_BAD_ACCESS (code=2, address=0x0)
- 5分钟成为车联网专家|如何实现C-V2X技术突破把住车联网发展命门
- 蓝牙BLE 华为 荣耀9 配对截图