html 代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <style>
- *{margin:0;padding:0;}
- body{background:#000;}
- canvas{display: block;}
- </style>
- </style>
- </head>
- <body>
- <canvas id="canvas"></canvas>
- </body>
- <script>
- // 随机颜色
- function color(){
- var col = [1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
- var res = '';
- for( var i = 0; i <6 ; i ++){
- var num = parseInt( Math.random()*15 );
- res += col[num] ;
- }
- return '#' + res;
- }
- // 请求动画帧, 减少浏览器的卡顿
- window.requestAnimFrame = ( function() {
- return window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- function( callback ) {
- window.setTimeout( callback, 1000 / 60 );
- };
- })();
- var can = document.getElementById('canvas');
- can.width = window.innerWidth ;
- can.height = window.innerHeight ;
- window.onresize = function(){
- can.width = window.innerWidth ;
- can.height = window.innerHeight ;
- }
- var c = can.getContext('2d');
- c.lineWidth = 0.5;
- // 初始化圆形粒子对象参数
- var dots = {
- n : 200 , // 圆形粒子个数个数
- distance : 45 , // 粒子间距离, 之后要用作判断
- arr : [] // 保存 n 个圆形粒子对象
- }
- // 创建圆形粒子对象
- function dot(){
- // 随机生成位置
- this.x = Math.random()*can.width;
- this.y = Math.random()*can.height;
- // 粒子半径
- this.randius = Math.ceil( Math.random()*4 );
- // 粒子颜色
- this.color = color();
- //X,Y 方向的运动速度数值
- this.vx = (-0.5 + Math.random())*2;
- this.vy = (-0.5 + Math.random())*2;
- }
- // 原形 -- 绘制粒子
- dot.prototype.draw = function(){
- c.beginPath();
- c.fillStyle = this.color;
- c.arc( this.x , this.y , this.randius , 0 , Math.PI*2 , false);
- c.closePath();
- c.fill();
- }
- // 生成圆形粒子对象, 添加到数组
- function create(){
- for( var i = 0 ; i < dots.n ; i++){
- // 循环创建 n 个粒子对象, 存放在 array 数组里面, 方便之后使用
- dots.arr.push( new dot() );
- }
- }
- // 绘制圆形粒子
- function drawdots(){
- for( var i = 0 ; i < dots.n ; i++){
- var dot = dots.arr[i];
- dot.draw();
- }
- }
- // 圆形粒子移动以及碰撞
- function movedots(){
- for( var i = 0 ; i < dots.n ; i++){
- dot = dots.arr[i];
- //x,y 方向碰壁, 反弹
- if( dot.y < 0 || dot.y> can.height){
- dot.vx = dot.vx ;
- dot.vy = -dot.vy ;
- }else if( dot.x <0 || dot.x> can.width){
- dot.vx = -dot.vx ;
- dot.vy = dot.vy ;
- }
- dot.x += dot.vx;
- dot.y += dot.vy;
- // 两球之间碰撞反弹, 圆心距离要用勾股定理 -- 斜边的距离
- for( var j = 0 ; j <dots.n ; j++){
- var iDot = dots.arr[i];
- var jDot = dots.arr[j];
- if( Math.sqrt( Math.pow( ( iDot.x - jDot.x ) , 2 ) + Math.pow( ( iDot.y - jDot.y ) , 2 ) ) < (iDot.randius + jDot.randius) ){
- iDot.vx = -iDot.vx ;
- iDot.vy = -iDot.vy ;
- iDot.x += iDot.vx;
- iDot.y += iDot.vy;
- jDot.vx = -jDot.vx ;
- jDot.vy = -jDot.vy ;
- jDot.x += jDot.vx;
- jDot.y += jDot.vy;
- }
- }
- }
- }
- // 圆形粒子移动动画
- function animatedot(){
- c.clearRect(0,0,can.width,can.height);
- movedots();
- drawdots();
- linkdot();
- requestAnimFrame( animatedot );
- }
- create();
- animatedot();
- // 链接粒子对象
- function linkdot(){
- for( var i = 0 ; i < dots.n ; i++){
- for( var j = 0 ; j < dots.n ; j ++){
- var iDot = dots.arr[i]; // 不能放在外层, 因为需要每次都判断
- var jDot = dots.arr[j];
- if( Math.sqrt( Math.pow( ( iDot.x - jDot.x ) , 2 ) + Math.pow( ( iDot.y - jDot.y ) , 2 ) ) < dots.distance ){
- c.beginPath();
- c.strokeStyle = color();
- c.moveTo( iDot.x , iDot.y);
- c.lineTo( jDot.x , jDot.y);
- c.closePath();
- c.stroke();
- }
- }
- }
- }
- </script>
- </html>
来源: http://www.qdfuns.com/article/28299/c18461a23b5ff5835f83dd0b36318261.html