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

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

代码语言：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.por.........完整代码请登录后点击上方下载按钮下载查看