canvas练手项目(二)——各种操作基础
2018-03-13 11:06
615 查看
想想应该在canvas上面作画了,那么就不得不提到事件了。
(打着canvas的旗号,写着mouse事件。挂羊头卖狗肉!哈哈哈哈哈~)
先来看一看HTML事件属性,我们要用的就是Mouse事件,就先研究下mouse事件的特性。
onmousedown
onmousemove
onmouseout
onmouseover
onmouseleave
onmouseenter
onmouseup
onmousewheel
先研究已上6个事件。
做了一个demo,用于了解mouse事件。
每个事件都绑定一下,接着鼠标轻轻划过绑定的DOM,我们可以看到事件顺序。
由此可见滑过的时间是mouseover最先触发,接着是mouseenter,离开时先触发的是mouseout接着才是mouseleave。
这里我陷入了沉思,mouseover和mouseenter是不是设计重复了??
之后去翻阅了下工具书,总结出mouseover和mouseenter最大的区别就是mouseover是冒泡的,mouseenter则不是。来看个例子,就能感觉到了。
例子
我们发现当滑过红色区域的时候mouseover不断的加数字,而mouseenter则很淡定。这就是冒泡的力量!
好了我们看下一个点击滑动的操作,这个时候我们需要了解的就是down和up!
上图,用实际操作说明一切:
down和up之间相当于一个区间,在这个区间我们可以干很多事,比如拖动,比如截图。就是要注意万一我们没有up,就直接离开了当前dom,那么这区间还没完没了了??
淡定!
虽然没有up的动作,但是我们看到out和leave,所以这个时候没有up也可以通过out和leave来判定区间范围。
(打着canvas的旗号,写着mouse事件。挂羊头卖狗肉!哈哈哈哈哈~)
先来看一看HTML事件属性,我们要用的就是Mouse事件,就先研究下mouse事件的特性。
onmousedown
onmousemove
onmouseout
onmouseover
onmouseleave
onmouseenter
onmouseup
onmousewheel
先研究已上6个事件。
做了一个demo,用于了解mouse事件。
yourDom.addEventListener("mousedown",function (e) { console.log("mousedown",e.clientX , e.clientY); })
每个事件都绑定一下,接着鼠标轻轻划过绑定的DOM,我们可以看到事件顺序。
由此可见滑过的时间是mouseover最先触发,接着是mouseenter,离开时先触发的是mouseout接着才是mouseleave。
这里我陷入了沉思,mouseover和mouseenter是不是设计重复了??
之后去翻阅了下工具书,总结出mouseover和mouseenter最大的区别就是mouseover是冒泡的,mouseenter则不是。来看个例子,就能感觉到了。
例子
我们发现当滑过红色区域的时候mouseover不断的加数字,而mouseenter则很淡定。这就是冒泡的力量!
好了我们看下一个点击滑动的操作,这个时候我们需要了解的就是down和up!
上图,用实际操作说明一切:
down和up之间相当于一个区间,在这个区间我们可以干很多事,比如拖动,比如截图。就是要注意万一我们没有up,就直接离开了当前dom,那么这区间还没完没了了??
淡定!
虽然没有up的动作,但是我们看到out和leave,所以这个时候没有up也可以通过out和leave来判定区间范围。
相关文章推荐
- Mac升级git版本 以及 使用git和github管理自己的项目---基础操作学习
- 使用git和github管理自己的项目---基础操作学习
- java 基础之数组各种操作
- SSIS项目基础实战操作手册_v1.0(傻瓜版)(二)
- ssh新手练手项目——员工curd操作和未登录拦截
- Canvas 项目经验整理 基础知识加总结
- 基础入门_Python-模块和包.深入SQLAlchemy之玩转各种增删查改操作?
- 使用git和github管理自己的项目---基础操作学习
- 使用git和github管理自己的项目---基础操作学习
- Java基础之练手小项目
- 【第一个开源项目】最完整的Andoird联系人操作,完美支持联系人的各种属性操作。
- SSIS项目基础实战操作手册_v1.0(傻瓜版)(三)
- gcc命令行计算器项目基础(比bc的操作简单多了)
- 四周 项目4 扩展3 文件操作 只需在扩展2的基础上增加一些程序即可
- 项目-数组类模板在数组类的基础上,将之改造为类模板,以使数组中可以存储各种类型的数据
- Project 2013项目管理教程(2):project基础操作概述
- Django 基础(一),项目创建、URL路由、数据库操作、模版
- ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
- canvas像素级操作实现各种滤镜之高斯模糊
- canvas练手项目(三)——Canvas中的Text文本