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

网友评论0