1.1.使用requestAnimationFrame的动画循环
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中
1.3.2 触摸位置
2.1弧度与角度的转换
(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;