zoukankan      html  css  js  c++  java
  • 博客美化,页首波浪

    首先需要申请开通博客js权限

    接着在页首html栏添加如下代码即可

     <canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>
     <script type="text/javascript">
      var canvas = document.getElementById('canvas'); 
      var ctx = canvas.getContext('2d'); 
      canvas.width = canvas.parentNode.offsetWidth; 
      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(){ 
       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>
    

      

  • 相关阅读:
    8张图带你轻松温习 Java 知识.md
    关于 Java 序列化你不知道的 5 件事
    为什么 String 是不可变的?
    如何使用 Nginx 优雅地限流?
    JAVA泛型编程笔记
    java_接口的应用
    java_抽象类应用
    深入理解Java的接口和抽象类
    java_重写与重载的区别
    Java:按值传递还是按引用传递详细解说
  • 原文地址:https://www.cnblogs.com/jstblog/p/15152633.html
Copyright © 2011-2022 走看看