由于涉及到事件处理,先学习了js中事件的相关内容。
1,由于js是单线程的,事件处理类似于一个中断的过程,处理完成之后继续回到断点执行。当然,多线程也可由中断实现,但是他们的区别是中断实现的多线程是按照时间片进行调度轮转的,线程交替运行。线程之间没有先后关系。而js的中断是执行之后返回到主程序,程序自始至终是一条直线。
2,事件有冒泡和捕获两种,dom2级别中,两种都有。具体参见:http://www.cnblogs.com/hh54188/archive/2012/02/08/2343357.html
一般使用冒泡,需要注意的是,事件不单单会触发节点的处理函数,也会触发其父节点的处理函数,如果父节点也有相应的处理函数的话。
这里有两个问题:
a,手机的传感器的读取实际上是可以一个事件处理过程 例子参见:view-source:http://www.pjhome.net/web/Orientation.html 亲测可用!!
b,尚未解决:是否自己可以定义一个事件,比如设备插上了新的传感器 希望大神能够解答
下面的代码是实现缤纷泡泡的功能,注意加入underscore-min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
canvas{
border: 1px solid red;
display: block;
margin: 20px auto;
}
</style>
<script type="text/javascript" src="js/underscore-min.js"></script>
</head>
<body>
<canvas id="cav" width="600" height="600"></canvas>
<script type="text/javascript">
var cav = document.getElementById("cav");
var ctx = cav.getContext("2d");
var ballarray = new Array();
function Ball(x,y){
this.x = x;
this.y = y;
this.r = 30;
this.dx = Math.random()*10-5;
this.dy = Math.random()*10-5;
this.dr = Math.random()+0.3;
ballarray.push(this);
}
Ball.prototype = {
update:function(){
this.x -= this.dx;
this.y -= this.dy;
this.r -= this.dr;
},
render:function(){
if(this.r <= 0){
ballarray = _.without(ballarray,this);
return 1;
}
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0 , Math.PI *2, true);
ctx.fillStyle = "blue";
ctx.fill();
return 0;
}
}
cav.addEventListener("mousemove",function(event){
new Ball(event.offsetX,event.offsetY);
});
setInterval(function(){
ctx.clearRect(0, 0, cav.width , cav.height);
for(var i=0 ; i<ballarray.length;i++){
ballarray[i].update();
if(ballarray[i].render() == 1){
i--;
}
}
}, 20);
</script>
</body>
</html>