zoukankan      html  css  js  c++  java
  • js实现水波纹背景

    <!DOCTYPE html>
    <html>
        <head>
         <title>水波背景</title>
         <meta charset="utf-8" />
         <style>
             html, body {100%; height:100%; padding:0; margin:0;}
         </style>
        </head>
        <body>
             <canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>
            <script type="text/javascript">
               //获得canvas容器
              var canvas = document.getElementById('canvas'); 
              //获得画笔
              var ctx = canvas.getContext('2d'); 
              //canvas设置宽度
              canvas.width = canvas.parentNode.offsetWidth; 
              //canvas设置高度
              canvas.height = canvas.parentNode.offsetHeight;
              //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout 
              window.requestAnimFrame = (function(){ 
              return window.requestAnimationFrame  || 
                window.webkitRequestAnimationFrame || 
                window.mozRequestAnimationFrame || 
                function( callback ){ 
                     window.setTimeout(callback, 1000 / 60); 
                }; 
              })(); 
              // 波浪大小
              var boHeight = canvas.height / 10;
              var posHeight = canvas.height / 1.2;
              //初始角度为0 
              var step = 0; 
              //定义三条不同波浪的颜色 
              var lines = ["rgba(0,222,255, 0.2)", "rgba(157,192,249, 0.2)", "rgba(0,168,255, 0.2)"]; 
              function loop(){ 
                  //清除canvas内容
                   ctx.clearRect(0,0,canvas.width,canvas.height); 
                   step++; 
                   //画3个不同颜色的矩形 
                   for(var j = lines.length - 1; j >= 0; j--) { 
                    ctx.fillStyle = lines[j]; 
                    //每个矩形的角度都不同,每个之间相差45度 
                    var angle = (step+j*50)*Math.PI/180; 
                    var deltaHeight = Math.sin(angle) * boHeight;
                    var 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.lineTo(0, posHeight+deltaHeight); 
                    ctx.closePath(); 
                    ctx.fill(); 
               }
               requestAnimFrame(loop);
              } 
              loop(); 
         </script>
    </body>
    </html>
  • 相关阅读:
    深入理解java垃圾回收算法
    JVM类加载机制与对象的生命周期
    JVM 类加载机制详解
    从经典面试题看java中类的加载机制
    Intellij IDEA常用快捷键介绍 Intellij IDEA快捷键大全汇总
    Java HashMap 如何正确遍历并删除元素
    记录Java的垃圾回收机制和几种引用
    浅谈jvm中的垃圾回收策略
    Mysql常见四种索引的使用
    Java虚拟机垃圾回收(三) 7种垃圾收集器
  • 原文地址:https://www.cnblogs.com/wanf/p/7808505.html
Copyright © 2011-2022 走看看