make-noise实现canvas线条波浪动画效果代码-html代码-BFW代码库

make-noise实现canvas线条波浪动画效果代码

代码语言：html

所属分类：动画

代码描述：make-noise实现canvas线条波浪动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html, body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      overflow: hidden;
    }
    
    body {
      background: black;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <canvas id="canvas"></canvas>
    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/make-noise.js"></script>
    <script>
        var canvas = document.getElementById('canvas'),
    		ctx = canvas.getContext('2d'),
    		fps = 60,
    		fov = 200,
    		waveHeight = 15,
    		cols = 40,
    		rows = 40,
    		offsetX = 0,
    		offsetY = 0,
    		inc = 0.01,
    		mesh = [];
    
    function resizeCanvas() {
    	canvas.width = window.innerWidth;
    	canvas.height = window.innerHeight
    }
    
    function generateMesh(){
    	
    	mesh=[];
    	var gridWidth = (canvas.width)/cols;
    	var gridHeight = (canvas.height)/rows;
    	var gridDepth = fov/rows;
    	
    	for(var col=0; col < cols; col++){
    		for(var row=0; row < rows; row++){
    			mesh.push([
    				{
    					x: col * gridWidth,
    					y: row * gridHeight+gridHeight,
    					z: fov - (row * gridDepth+gridDepth),
    				},
    				{
    					x: col * gridWidth,
    					y: row * gridHeight,
    					z: fov - (row * gridDepth),
    				},
    				{
    					x: col * gridWidth+gridWidth,
    					y: row * gridHeight, 
    					z: fov - (row * gridDepth)
    				}
    			]);
    			// Reflext
    			mesh.push([
    				{
    					x: col * gridWidth+gridWidth,
    					y: row * gridHeight,
    					z: fov - (row * gridDepth)
    				},
    				{
    					x: col * gridWidth+gridWidth,
    					y: row * gridHeight+gridHeight, 
    					z: fov - (row * gridDepth+gridDepth),
    				},
    				{
    					x: col * gridWidth,
    					y: row * gridHeight+gridHeight,
    					z: fov - (row * gridDepth+gridDepth),
    				}
    			]);
    		}	
    	}
    
    }
    
    function drawMesh(){
  .........完整代码请登录后点击上方下载按钮下载查看