首先需要申請開通部落格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>