JS实现动态波浪背景

1.1 预期效果

大屏场景下，给决策报表添加一个酷炫的动态波浪背景，如下图所示：

1.2 实现思路

用户可直接用 JS 代码来制作动态背景。

2.1 新建报表

新建决策报表，另存为：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\33-JS实现动态波浪背景.frm。

2.2 添加初始化后事件

注：需先将 body 属性中的背景设置为「没有背景」。

点击 body 组件，添加初始化后事件，如下图所示：

JS 代码如下：

$("body").prepend('<canvas id="canvas" style="position:absolute;z-index:-2;"></canvas>');
//在body中插入canvas画布，并置于底层
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);  
          };  
  })();  
  //初始角度为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*45)*Math.PI/180;  
          var deltaHeight   = Math.sin(angle) * 50;  
          var deltaHeightRight   = Math.cos(angle) * 50;  
          ctx.beginPath();  -
          ctx.moveTo(0, canvas.height/2+deltaHeight);  
          ctx.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight);  
          ctx.lineTo(canvas.width, canvas.height);  
          ctx.lineTo(0, canvas.height);  
          ctx.lineTo(0, canvas.height/2+deltaHeight);  
          ctx.closePath();  
          ctx.fill();  
      }  
      requestAnimFrame(loop);  
  }  
  loop();

2.3 效果预览

保存模板，点击「PC端预览」，效果如 1.1 预期效果所示。

注：不支持移动端。

已完成模板请参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\33-JS实现动态波浪背景.frm。

点击下载模板：33-JS实现动态波浪背景.frm