canvas学习笔记02

来源：互联网发布：日本神钢造假知乎编辑：程序博客网时间：2024/05/26 19:14

由于涉及到事件处理，先学习了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>

0 0