js实现canvas湖面倒影波纹涟漪动画效果代码-html代码-BFW代码库

js实现canvas湖面倒影波纹涟漪动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas湖面倒影波纹涟漪动画效果代码

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

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

<head>

    <meta charset="UTF-8">



    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
        html,
        body {
        	height: 100%;
        }
        canvas {
        	width: 100%;
        	height: 100%;
        	background: black;
        }
    </style>




</head>

<body>



    <script>
        // setup
        let store = {
          /**
           * 	p - height percentage, 	a - amplitude
           *     CHANGE THESE VALUES to have fun!
           *     you can change the img src also ;-)
           */
          from: { p: 38, a: 4 },
          to: { p: 100, a: 1 },
          wavelength: Math.PI * 32 };
        
        
        let phase = 0;
        
        const wi = Math.max(
        document.documentElement["clientWidth"],
        document.body["scrollWidth"],
        document.documentElement["scrollWidth"],
        document.body["offsetWidth"],
        document.documentElement["offsetWidth"]),
        
        hi = Math.max(
        document.documentElement["clientHeight"],
        document.body["scrollHeight"],
        document.documentElement["scrollHeight"],
        document.body["offsetHeight"],
        document.documentElement["offsetHeight"]);
        
        
        // create canvas
        const canvas = document.createElement("canvas");
        canvas.width = wi;
        canvas.height = hi;
        document.body.appendChild(canvas);
        
        const ctx = canvas.getContext("2d");
        ctx.imageSmoothingEnabled = false;
        
        const buffer = document.createElement("canvas");
        buffer.width = wi;
        buffer.height = 1;
        
        // load image
 .........完整代码请登录后点击上方下载按钮下载查看