canvas点对点连线传送信息并计算数量动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas点对点连线传送信息并计算数量动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">


<style>
*{margin:0;padding:0;}
canvas {
	background:#111;
	background-size:cover;
	display:block;
}
body{overflow: hidden;}
</style>

</head>
<body>

<div></div>

<script>
// queue to land
// number of docked or approaching planes
// change color of plane for modes
// make planes avoid planes
// adjustable settings
// add random wind factors

window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();

$ = {};

$.util = {
  rand: function( min, max ) {
    return Math.random() * ( max - min ) + min;
  },
  randInt: function( min, max ) {
    return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
  },
  norm: function( val, min, max ) {
	    return ( val - min ) / ( max - min );
	  },
  lerp: function( norm, min, max ) {
    return ( max - min ) * norm + min;
  },
	  map: function( val, sMin, sMax, dMin, dMax ) {
	    return $.util.lerp( $.util.norm( val, sMin, sMax), dMin, dMax );
  	},
  clamp: function( val, min, max ) {
	    return Math.min( Math.max( val, Math.min( min, max ) ), Math.max( min, max ) );
  	},
	  distance: function( p1, p2 ) {
		    var dx = p1.x - p2.x,
			        dy = p1.y - p2.y;
	    	return Math.sqrt( dx * dx + dy * dy );
	  },
	  angle: function( p1, p2 ) {
		    return Math.atan2( p1.y - p2.y, p1.x - p2.x );
	  },
  inRange: function( val, min, max ) {
		    return val >= Math.min( min, max ) && val <= Math.max( min, max );
	  },
  pointInRect: function( x, y, rect ) {
		    return $.util.inRange( x, rect.x, rect.x + rect.width ) &&
		       $.util.inRange( y, rect.y, rect.y + rect.height );
	  },
	  pointInArc: function( p, a ) {
		    return distance( p, a ) <= a.radius;
	  },
	  setProps: function( obj, props ) {
		    for( var k in props ) {
			      obj[ k ] = props[ k ];
		    }
	  },
  multicurve: function( points, ctx ) {
		    var p0, p1, midx, midy;
    ctx.moveTo(points[0].x, points[0].y);
    for(var i = 1; i < points.length - 2; i += 1) {
      p0 = points[i];
      p1 = points[i + 1];
      midx = (p0.x + p1.x) / 2;
      midy = (p0.y + p1.y) / 2;
      ctx.quadraticCurveTo(p0.x, p0.y, midx, midy);
    }
    p0 = points[points.length - 2];
    p1 = points[points.length - 1];
    ctx.quadraticCurveTo(p0.x, p0.y, p1.x, p1.y);
  }
};

$.init = function() {
  // setup
  $.c = document.createElement( 'canvas' );
  $.ctx = $.c.getContext( '2d' );
  document.body.appendChild( $.c );
  
  // collections
  $.ports = [];
  $.planes = [];  
  
  // events
  window.addEventListener( 'resize', $.reset, false );
  window.addEventListener( 'click', $.reset, false );
  $.reset();
  $.step();
};

$.reset = function() {
  // dimensions
  $.cw = $.c.width = window.innerWidth;
  $.ch = $.c.height = window.innerHeight;
  $.dimAvg = ( $.cw + $.ch ) / 2;
  
  // type / font
  $.ctx.textAlign = 'center';
  $.ctx.textBaseline = 'middle';
  $.ctx.font = '16px monospace';
  
  // options / settings
  $.opt = {};
  $.opt.portCount = 6;
  $.opt.planeCount = 80;
  $.opt.portSpacingDist = $.dimAvg / $.opt.portCount;
  $.opt.holdingDist = 5;
  $.opt.approachDist = 80;
  $.opt.planeDist = 20;  
  $.opt.pathSpacing = 15;
  $.opt.pathCount = 40;
  $.opt.avoidRadius = 30;
  $.opt.avoidMult = 0.025;
  
  // collections
  $.ports.length = 0;
  $.planes.length = 0;
 
  // delta
  $.lt = Date.now();
  $.dt = 1;
  $.et = 0;
  $.tick = 0;
  
  // setup ports
  for( var i = 0; i < $.opt.portCount; i++ ) {
    $.ports.push( new $.Port() );
  }
  
  // setup planes
  for( var i = 0; i < $.opt.planeCount; i++ ) {
    $.planes.push( new $.Plane() );
  }  
};

$.Port = function() {
  this.x = $.util.rand( $.cw * 0.1, $.cw * 0.9 );
  this.y = $.util.rand( $.ch * 0.1, $.ch * 0.9 );
  while( !this.validSpacing() ) {
    this.x = $.util.rand( $.cw * 0.1, $.cw * 0.9 );
    this.y = $.util.rand( $.ch * 0.1, $.ch * 0.9 );
  }
};

$.Port.prototype.validSpacing = function() {
  var spaced = true,
      i = $.ports.length;
  while( i-- ) {
    var otherPort = $.ports[ i ];
    if( $.util.distance( otherPort, this ) < $.opt.portSpacingDist ) {
      spaced = false;
      break;
    }
  }
  return spaced;
};

$.Port.prototype.update = function( i ) {
  var j = $.planes.length;
  this.approachingCount = 0;
  while( j-- ) {
    var plane = $.planes[ j ];
    if( plane.destIndex == i && plane.approaching ) {
      this.approachingCount++;
    }
  }
};

$.Port.prototype.render = function( i ) {
  $.ctx.beginPath();  
  $.ctx.arc( this.x, this.y, 3 + ( this.approachingCount + 5 ), 0, Math.PI * 2 );
  $.ctx.fillStyle = 'hsla(120, 90%, 80%, ' + ( 0.35 + Math.sin( $.et / 20 ) * 0.2 ) + ')�.........完整代码请登录后点击上方下载按钮下载查看