canvas学习笔记02

最新推荐文章于 2022-07-05 09:44:16 发布

荒原葱郁

最新推荐文章于 2022-07-05 09:44:16 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/ll363124077/article/details/54021706

版权

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

收藏

觉得还不错? 一键收藏
1
评论
canvas学习笔记02

由于涉及到事件处理，先学习了js中事件的相关内容。1，由于js是单线程的，事件处理类似于一个中断的过程，处理完成之后继续回到断点执行。当然，多线程也可由中断实现，但是他们的区别是中断实现的多线程是按照时间片进行调度轮转的，线程交替运行。线程之间没有先后关系。而js的中断是执行之后返回到主程序，程序自始至终是一条直线。2，事件有冒泡和捕获两种，dom2级别中，两种都有。具体参见：http:/
复制链接

扫一扫