原生js实现canvas流水波纹波浪条纹波动动画效果代码-html代码-BFW代码库

原生js实现canvas流水波纹波浪条纹波动动画效果代码

代码语言：html

所属分类：动画

代码描述：原生js实现canvas流水波纹波浪条纹波动动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">

</head>
<body>

<script>
    
    // NOTE: Click Run if you don't see the waves.


// Create canvas.
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
// Set canvas to the size of the viewable window.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


// Build three waves with slightly different settings.
let waves = [];
waves.push(new Wave({
  frequency: .02,
  current: .04,
  verticalOffset: 100
}));
waves.push(new Wave({
  frequency: .02,
  current: .032,
  amplitude: 25,
  verticalOffset: 120
}));
waves.push(new Wave({
  frequency: .025,
  current: .03,
  amplitude: 15,
  verticalOffset: 135
}));

// Draw loop.
drawing();

function drawing () {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  waves.forEach(wave => wave.draw());
  setTimeout(() => {
    window.requestAnimationFrame(drawing);
  }, 1);
}


function Wave (options) {
  this.options = {
    amplitude: 20,
    frequency: .05,
    current: .01,
    v.........完整代码请登录后点击上方下载按钮下载查看