1.1.使用requestAnimationFrame的动画循环
(function drawFrame () {
window.requestAnimationFrame(drawFrame,canvas);
//animation code...
}());
1.2交互事件
1.2.1 鼠标常见的一些事件:
● mousedown
● mouseup
● click
● dblclick
● mousewheel
● mousemove
● mouseover
● mouseout
1.2.2 触摸事件
● touchstart
● touchend
● touchmove
1.3 获取位置
1.3.1 鼠标位置
鼠标事件的两个属性确定鼠标的当前位置:pageX和pageY。兼容属性clientX与clientY。
封装获取鼠标位值到函数utils.captureMouse中
utils.captureMouse = function(element){
var mouse = {x:0,y:0};
element.addEventListener('mousemove',function(event){
var x,y;
if(event.pageX || event.pageY){
x = event.pageX;
y = event.pageY;
}else{
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= element.offsetLeft;
y -= element.offsetTop;
mouse.x = x;
mouse.y = y;
},false);
return mouse;
}
1.3.2 触摸位置
utils.captureTouch = function(element){
var touch = {x:null,y:null,isPressed:false};
element.addEventListener('touchstart',function(event){
touch.idPressed = true;
},false);
element.addEventListener('touchend',function(event)){
touch.isPressed = false;
touch.x = null;
touch.y = null;
}
element.addEventListener('touchmove',function(event){
var x,y,touch_event = event.touches[0];//first touch
if(touch_event.pageX || touch_event.pageY){
x = touch_event.pageX;
y = touch_event.pageY;
}else{
x = touch_event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = touch_event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= offsetLeft;
y -= offsetTop;
touch.x = x;
touch.y = y;
},false);
return touch;
};
2.1弧度与角度的转换
radians = degrees * Math.PI / 180;
degrees = radians * 180 / Math.PI;
分享到:
相关推荐
《HTML5+JavaScript动画基础》源代码
本书中,作者首先清晰地介绍了所有相关的数学知识,然后引入了加速、速度向量、缓动、弹动、碰撞检测、动能守恒、3D、正向运动学和反向运动学等物理概念。
HTML5+JavaScript动画基础 源码
HTML5+JavaScript动画基础(中文完整版)
《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分,分别介绍了动画的基本概念、动画的JavaScript基础、动画中的三角学、渲染技术、速度向量和加速度、边界与摩擦力、用户...
Web前端学习笔记:HTML5+CSS3+JavaScript.pdf
HTML+CSS+JavaScript+php+mysql帮助手册(内含html5+css3+javascript5帮助手册)。
HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】
前端HTML5+CSS+JavaScript详细学习笔记,来自菜鸟教程、w3cSchool和b站视频教程的总结,包括基础知识和示例代码,欢迎大家指正
(1) 本书很多HTML 5、CSS 3代码必须在高版本的浏览器中才能看到效果。建议读者安装Opera 11.60、Firefox 10.0、Chrome 17.0以上版本的浏览器。 (2) 本书少量程序需要使用Java编译、运行,建议安装jdk-7u3-...
前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar ...
HTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+...
用HTML5+JavaScript+CSS3实现的房贷计算器
动态网页设计与制作(HTML5+CSS3+JavaScript)(第3版)-PPT课件.zip
疯狂html5+css3+javascript讲义源码,光盘全部资料。不包含pdf,
1.1 HTML历史与HTML 5 2 1.2 HTML 5的优势 6 1.3 HTML 5的基本结构和语法变化 8 1.4 本章小结 12 第2章 HTML 5的常用元素与属性 14 2.1 HTML 5保留的常用元素 15 2.2 HTML 5增强的iframe元素 34 2.3 HTML 5...
HTML5_JavaScript动画基础(高清带目录),值得下载!!!
CSS3+Html5+JavaScript全套参考手册,方便你我他!
《精通HTML5 + CSS3+JavaScript网页设计》内容主要包括CSS3的基本语法和概念,设置文字、段落、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS3滤镜的应用。重点介绍如何使用DlV+CSS3进行网页布局,注重...
html5+JavaScript在线 mp3铃声裁剪 .zip