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


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

相关文章推荐

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

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇完成这样一个例子,让主角随着鼠标移动...

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

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

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

使用jTopo给Html5 Canva中的元素添加鼠标事件

在jTopo中给节点元素添加事件非常简单,有两种方式: 一、

初学html5 <canvas>学习笔记

初学html5-canvas学习笔记

Html5——Canvas标签学习笔记

一、定义一个带边框、规定大小的canvas 不建议使用CSS方法来定义canvas的大小,因为使用CSS方法指定的大小是画布显示区的大小;使用定义width属性的话,是将canvas内图片的...

canvas之鼠标事件

canvas的鼠标事件

HTML5 之 Canvas (案例)

**星星闪动动画** 1、如何轮播一张图片上的序列帧 2、canvas的几个主要绘图API:drawImage()、save()、restore()。 3、如何处理鼠标事件 笔记: Win...

cocos2d-x初探学习笔记(15)--CCOrbitCamera

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man Cocos2d-x提供了一中根据球面坐标...

HTML5----Canvas 学习笔记一

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) ...

html5 canvas 学习笔记

getContext("2d")  对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 fillStyle属性可以是CSS颜色,渐变,或图案 fillRe...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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