canvas 背景动画

首先引用文件

<script src="jquery.min.js"></script>

// 个数 // 如果数量小于num，有这些几率添加一个新的 // 初始半径最小值// 初始半径最大值// 初始透明度最小值// 透明度递减值最小值// 颜色亮度最小值，等等设置。

var canvas = document.getElementById("c");
			var ctx = canvas.getContext("2d");
			var c = $("#c");
			var w,h;
			var pi = Math.PI;
			var all_attribute = {
				num:100,            			 // 个数
				start_probability:0.1,		     // 如果数量小于num，有这些几率添加一个新的     		     
				radius_min:1,   			     // 初始半径最小值
				radius_max:2,   			     // 初始半径最大值
				radius_add_min:.3,               // 半径增加最小值
				radius_add_max:.5,               // 半径增加最大值
				opacity_min:0.3,                 // 初始透明度最小值
				opacity_max:0.5, 				 // 初始透明度最大值
				opacity_prev_min:.003,            // 透明度递减值最小值
				opacity_prev_max:.005,            // 透明度递减值最大值
				light_min:40,                 // 颜色亮度最小值
				light_max:70,                 // 颜色亮度最大值
			};
			var style_color = find_random(0,360);  
			var all_element =[];
			window_resize();
			function start(){
				window.requestAnimationFrame(start);
				style_color+=.1;
				ctx.fillStyle = 'hsl('+style_color+',100%,97%)';
				ctx.fillRect(0, 0, w, h);
				if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability){
					all_element.push(new ready_run);
				}
				all_element.map(function(line) {
					line.to_step();
				})
			}