Html5 Canvas初探学习笔记(15) -鼠标事件
来源:互联网 发布:sqlserver 定义表变量 编辑:程序博客网 时间:2024/06/06 00:53
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man
本篇完成这样一个例子,让主角随着鼠标移动,效果如下:
update函数和上一篇一致,代码如下:
然后来看init的初始化部分,和上一篇的示例一样,代码如下:
然后分别定义mousedown,mousemove,mouseup,分别对应鼠标按下,移动和抬起。代码分别如下:
首先用如下代码获得坐标,如下代码使用于各种浏览器:
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的游戏实例
- Html5 Canvas初探学习笔记(15) -鼠标事件
- Html5 Canvas初探学习笔记(6) -变换
- Html5 Canvas初探学习笔记(7) -合成
- Html5 Canvas初探学习笔记(8) -阴影
- Html5 Canvas初探学习笔记(9) -渐变
- Html5 Canvas初探学习笔记(1)-画一个矩形
- Html5 Canvas初探学习笔记(2) -绘制深入
- Html5 Canvas初探学习笔记(4) -清除屏幕
- Html5 Canvas初探学习笔记(5) -绘图状态
- Html5 Canvas初探学习笔记(10) -复杂路径
- Html5 Canvas初探学习笔记(11) -简易图片操作
- Html5 Canvas初探学习笔记(12) -图片裁减和调整
- Html5 Canvas初探学习笔记(13) -图片变换
- Html5 Canvas初探学习笔记(14) -简单动画实现
- HTML5 Canvas鼠标与键盘事件
- html5 canvas 学习笔记
- html5学习笔记 -- canvas
- HTML5学习笔记------Canvas
- HDU 3988 数论
- Butterfly 只读字段赋值
- Windows窗体资源管理器Treeview运用
- 数据库知识
- 从Hibernate2到3移植的两点初体验
- Html5 Canvas初探学习笔记(15) -鼠标事件
- C++ FILE OPERATE
- 使用Hibernate3实现分页功能
- 【html5 每日练习】钟表的外观
- smartPointer
- C++第12周报告2-2(编写大奖赛用的计分程序)
- HDU 3991 最短路+最小路径覆盖
- Hadoop启动显示错误:/lib/ld-linux.so.2: bad ELF interpreter:
- php安装GD过程中报错