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的游戏实例


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

H5使用canvas实现星星闪烁效果

html star JS main.js var can; var ctx; var w,h; var girlPic = new...

HTML5 Canvas绘制的图形的事件处理

DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到。比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行...
  • vuturn
  • vuturn
  • 2015年05月18日 15:23
  • 3591

Html5 Canvas初探学习笔记(12) -图片裁减和调整

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 上一篇讲了图片的两种操作,读入和导出,而...

Html5 Canvas初探学习笔记(11) -简易图片操作

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇介绍简易的图片操作,首先是简易的图片...

Html5 Canvas初探学习笔记(4) -清除屏幕

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 有些时候,我们需要清除部分或者全部的屏幕,类...
  • bill_man
  • bill_man
  • 2012年03月22日 22:05
  • 15904

Html5 Canvas初探学习笔记(14) -简单动画实现

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 之前都是简单的静止绘图,本篇实现一个简单...

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

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

Html5 Canvas初探学习笔记(10) -复杂路径

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 之前已经介绍过简单的绘制路径,本篇介绍绘...

Html5 Canvas初探学习笔记(6) -变换

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 在html5中,可以实现多种的图形变换包...

Html5 Canvas初探学习笔记(3) -绘制样式和绘制文本

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 通过设置2d渲染上下文的fillStyl...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html5 Canvas初探学习笔记(15) -鼠标事件
举报原因:
原因补充:

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