反馈已提交

网络繁忙

JS实现动态波浪背景

  • 文档创建者:L大大
  • 历史版本:3
  • 最近更新:Alicehyy 于 2022-08-22
  • 1. 概述

    1.1 预期效果

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

    1582900628303953.gif

    1.2 实现思路

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

    2. 示例

    2.1 新建报表

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

    2.2 添加初始化后事件

    注:需先将 body 背景设置为「自定义>没有背景」。

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

    1582900438926287.png

    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 预期效果所示。

    注:不支持移动端。

    3. 已完成模板

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

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

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持