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