Html5 Canvas初探学习笔记(15) -鼠标事件

原创 2012年04月10日 22:38:02

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man

本篇完成这样一个例子,让主角随着鼠标移动,效果如下:


update函数和上一篇一致,代码如下:


然后来看init的初始化部分,和上一篇的示例一样,代码如下:

然后分别定义mousedownmousemovemouseup,分别对应鼠标按下,移动和抬起。代码分别如下:


首先用如下代码获得坐标,如下代码使用于各种浏览器:

var mx,my;

if(ev.layerX || ev.layerX==0){

mx = ev.layerX;

my = ev.layerY;

}else if(ev.offsetX || ev.offsetX==0){

mx = ev.offsetX;

my = ev.offsetY;

}

然后检测鼠标坐标是否在图片的范围内,如果在范围内获得坐标偏移。


如果mousedown在图片范围内,在move中重新获得图片坐标,在抬起函数时释放,然后把函数注册到canvas中,完成本示例/

如有错误,希望大家多多指正

下一篇继续研究canvas的游戏实例


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bill_man/article/details/7447499

HTML5 Canvas 绘图方法整理 【十五、Canvas页面交互: 鼠标事件 】

在Canvas中 鼠标事件分为以下三种: 1、鼠标按下 : mousedown 2、鼠标松开 : mouseup; 3、鼠标移动 : mousemove 一般需要用到...
  • freedomVenly
  • freedomVenly
  • 2018年02月20日 23:05
  • 102

canvas之鼠标事件

canvas的鼠标事件
  • huoer_12
  • huoer_12
  • 2014年10月12日 22:53
  • 1889

【实例】【html5】在canvas获取鼠标的坐标

方法 使用onmousemove来实时获取当前鼠标移动事件,以刷新新的坐标 使用canvas.getBoundingClientRect()获取当前画布的位置信息 实现 在线演示 ...
  • u010513756
  • u010513756
  • 2015年08月09日 07:50
  • 37999

【HTML5学习笔记】15:CSS初探

CSS层叠样式表,用来对HTML文档外观的表现形式进行排版和格式化。 几个名词 ①层叠:同一个元素通过不同方式的设置产生的样式叠加或冲突覆盖。优先级从低到高为浏览器样式 ②继承:一个被嵌套的元素得到它...
  • SHU15121856
  • SHU15121856
  • 2017年06月12日 22:56
  • 530

HTML5 Canvas鼠标与键盘事件

演示HTML5 Canvas鼠标事件,获在Canvas对象上的取鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动。...
  • jia20003
  • jia20003
  • 2013年07月04日 14:12
  • 42450

canvas响应鼠标事件

Sprite sheets body { background: #dddddd; } #canvas...
  • hb707934728
  • hb707934728
  • 2017年03月29日 16:27
  • 2441

HTML5 Canvas 初探

仅仅只是一个简单的hello world.js代码很简单: canvas1 //@author 杨虹昌 //测试浏览器是否支持canvas function can...
  • yhc13429826359
  • yhc13429826359
  • 2013年10月28日 00:25
  • 1331

Html5 Canvas初探学习笔记(9) -渐变

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇继续介绍html5的绘制效果,和之前介绍...
  • bill_man
  • bill_man
  • 2012年03月31日 22:49
  • 3940

Html5 Canvas初探学习笔记(8) -阴影

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇继续介绍html5的一些状态值,ht...
  • bill_man
  • bill_man
  • 2012年03月29日 21:39
  • 4392

Html5 Canvas初探学习笔记(2) -绘制深入

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 上一篇基本的介绍了Html5 canva...
  • bill_man
  • bill_man
  • 2012年03月20日 21:41
  • 4105
收藏助手
不良信息举报
您举报文章:Html5 Canvas初探学习笔记(15) -鼠标事件
举报原因:
原因补充:

(最多只允许输入30个字)