canvas波浪起伏动画效果代码-html代码-BFW代码库

canvas波浪起伏动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas波浪起伏动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body{
  margin:0;
  padding:0;
  overflow:hidden;
}

canvas{
  margin:0;
  padding:0;
}
</style>




</head>

<body  >
  <canvas></canvas>

  
      <script >
/* adjust these to your liking! */
var slowness = 2;
var foregroundLeftColor = "rgba(102, 51, 255,.8)";
var foregroundRightColor = "rgba(0, 153, 204,.3)";
var backgroundLeftColor = "rgba(102, 51, 255,.3)";
var backgroundRightColor = "rgba(0, 153, 204,.8)";

/* code below */

var canvas = document.querySelector('canvas');
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
canvas.width = canvasWidth;
canvas.height = canvasHeight;

var ctx = canvas.getContext('2d');
var pi = Math.PI;


//this generates an array containing 'y' values, for a particular wave and for a particular point in time, and it's based on the sine wave equation: https://en.wikipedia.org/wiki/Sine_wave
function getWaveHeights(revsPerCanvas, waveSpeed, waveHeight, time, startAngle) {
  var amplitude = waveHeight * canvasHeight / 4;
  var frequency = revsPerCanvas / canvasWidth;
  var heightArray = [];
  waveSpeed /= slowness;
  for (x = 0; x <= canvasWidth; x += 1) {
    var y = Math.sin(x * frequency * 2 *.........完整代码请登录后点击上方下载按钮下载查看