Canvas水波效果

作者: 聪明的汤姆 | 来源:发表于2018-07-23 11:29 被阅读5次

Canvas水波效果
canvas实现水波纹效果
水波效果
HTML5 Canvas笔记——Canvas绘制矩形（外角矩形和
微信小程序 canvas签名、绘图
前端效果链接
Canvas和Path的基础用法
2019-11-05
canvas中通过globalAlpha实现渐隐效果
蛋有点小疼__Andriod向下兼容的坑

效果图

water.gif

完整代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Javascript水波图</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>

  <canvas id="water"></canvas>

  <script>
    // 兼容的requestAnimationFrame函数
    let requestAnimationFrame = (function () {
      return window.requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame || function (
        callback) {
        window.setTimeout(callback, 1000 / 60);
      }
    })();

    // 封装设置canvas大小的函数
    let setCanvasSize = function () {
      canvas.width = canvas.parentNode.offsetWidth;
      canvas.height = canvas.parentNode.offsetHeight;
    }

    // 获取canvas相关
    let canvas = document.querySelector('#water');
    let ctx = canvas.getContext('2d');
    setCanvasSize();

    // 一些变量
    let boHeight = canvas.height / 30; // 顶峰高度
    let posHeight = canvas.height / 1.1; // 最低高度
    let step = 0; // 初始角度
    let colors = ['rgba(0, 150, 138, 0.6)', 'rgba(0, 150, 138, 0.3)', 'rgba(0, 150, 138, 0.1)'];

    // 绘制函数
    let paint = function () {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
      step += 1; // 角度

      // 遍历colors数组，进行绘制
      colors.forEach((item, index) => {
        ctx.fillStyle = item; // 画笔的颜色
        let angle = (step + index * 50) * Math.PI / 180; // 相差的角度
        let deltaHeight = Math.sin(angle) * boHeight; // 线条左边的起点
        let deltaHeightRight = Math.cos(angle) * boHeight; //线条右边的终点
        ctx.beginPath();
        ctx.moveTo(0, posHeight + deltaHeight);
        ctx.bezierCurveTo(canvas.width / 2, posHeight + deltaHeight - boHeight, canvas.width / 2, posHeight +
          deltaHeightRight - boHeight, canvas.width, posHeight + deltaHeightRight); // 绘制贝塞尔曲线
        ctx.lineTo(canvas.width, canvas.height); // 防止右侧出现空隙
        ctx.lineTo(0, canvas.height); // 防止左侧出现空隙
        ctx.closePath();
        ctx.fill();
      })

      requestAnimationFrame(paint); // 自调
    }

    // 调用绘制函数
    paint();

    // 响应式
    window.onresize = setCanvasSize;
  </script>

</body>

</html>