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

canvas波浪波纹动画效果代码

代码语言：html

所属分类：动画

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

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

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

<head>

  <meta charset="UTF-8">


  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  width:100vw;
  height:100vh;
}
</style>



</head>

<body>
  <canvas id="backgroundCanvas"></canvas>

  
      <script >
const canvas = document.getElementById('backgroundCanvas');
canvas.width = innerWidth;
canvas.height = innerHeight;
const ctx = canvas.getContext('2d');

const bgwidth = canvas.width;
const midy = canvas.height / 2;
const amplitude = 50;
const wavelength = 0.01;
const frequency = 0.01;

// return a random number within a range
function getRandomNum(min, max) {
  return Math.random() * (max - min) + min;
}

// map a number from 1 range to another
function map(n, start1, end1, start2, end2) {
  return (n - start1) / (end1 - start1) * (end2 - start2) + start2;
}

function radians($degrees) {
  return $degrees * Math.PI / 180;
}
// Given the origin point of the circle, its radius and the angle in Radians (degrees * Math.PI / 180)
// it returns the a point object showing the x,y coordinates of the point on a circle.

function findPointOnCircle(originX, originY, radius, degrees) {
  let angleRadians = radians(degrees);
  var newX = radius * Math.cos(angleRadians) + originX;
  var newY = radius * Math.sin(angleRadians) + originY;
  return { "x": newX, "y": newY };
}

function drawCircles($amt, $ctx) {
  for (let i = 0; i < $amt; i++) {
    new Circle(getRandomNum(0, window.innerWidth), getRandomNum(0, window.innerWidth), 100, $ctx);
  }
}

class Circle {
  constructor($x, $y,.........完整代码请登录后点击上方下载按钮下载查看