javascript - html wave的实现

问题描述

问 题

如何实现wave动画？求demo

我理解的关键点：
1、色彩的均匀渐变，比较柔和，没有明显的过渡层
2、不同频率的正弦波

我的实现:

效果相差很大！

let canvas1 = document.querySelector('#canvas1');
let ctx = canvas1.getContext('2d');
canvas1.width = canvas1.parentNode.offsetWidth;
canvas1.height = 150;

window.requestAnimFrame = (function () {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function (callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

let step = 0;
let line1 = ctx.createLinearGradient(30, 0, 120, 0);
let line2 = ctx.createLinearGradient(90, 0, 180, 0);
let line3 = ctx.createLinearGradient(160, 0, 250, 0);

line1.addColorStop(0.2, 'rgba(93,204,189, 0.4)');
line1.addColorStop(0.4, 'rgba(108,204,198, 0.4)');
line1.addColorStop(0.6, 'rgba(104,194,202, 0.4)');
line1.addColorStop(0.8, 'rgba(101,187,205, 0.4)');
line1.addColorStop(1, 'rgba(79,174,201, 0.4)');

line2.addColorStop(0.2, 'rgba(93,204,189, 0.4)');
line2.addColorStop(0.4, 'rgba(108,204,198, 0.4)');
line2.addColorStop(0.6, 'rgba(104,194,202, 0.4)');
line2.addColorStop(0.8, 'rgba(101,187,205, 0.4)');
line2.addColorStop(1, 'rgba(79,174,201, 0.4)');

line3.addColorStop(0.2, 'rgba(93,204,189, 0.4)');
line3.addColorStop(0.4, 'rgba(108,204,198, 0.4)');
line3.addColorStop(0.6, 'rgba(104,194,202, 0.4)');
line3.addColorStop(0.8, 'rgba(101,187,205, 0.4)');
line3.addColorStop(1, 'rgba(79,174,201, 0.4)');

let lines = [line1, line2, line3];

function loop() {
  ctx.clearRect(0, 0, canvas1.width, canvas1.height);
  step++;
  for (let j = lines.length - 1; j >= 0; j--) {
    ctx.fillStyle = lines[j];
    let angle = (step + j * 45) * Math.PI / 180;
    let deltaHeight = Math.sin(angle) * 30;
    let deltaHeightRight = Math.cos(angle) * 30;
    ctx.beginPath();
    ctx.moveTo(0, canvas1.height / 2 + deltaHeight);
    ctx.bezierCurveTo(canvas1.width / 2, canvas1.height / 2 + deltaHeight - 50, canvas1.width / 2, canvas1.height / 2 + deltaHeightRight - 50, canvas1.width, canvas1.height / 2 + deltaHeightRight);
    ctx.lineTo(canvas1.width, canvas1.height);
    ctx.lineTo(0, canvas1.height);
    ctx.lineTo(0, canvas1.height / 2 + deltaHeight);
    ctx.closePath();
    ctx.fill();
  }
  requestAnimFrame(loop);
}

loop();

解决方案

之前在做小程序的时候写了一个wave，给你搬出来参考下（我没有写颜色渐变）

https://codepen.io/ygjack/pen...

这篇关于javascript - html wave的实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！