JS实现大屏旋转星空背景

JS实现大屏旋转星空背景:https://help.fanruan.com/finereport/doc-view-3043.html

请问这个背景,可以在大屏的每个sheet页下都加上吗?  如果可以,怎么加? 

FineReport 嗨工真的L 发布于 4 小时前
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共2回答
最佳回答
0
snrtuemcLv8专家互助
发布于3 小时前

这个目前没有标准文档,建议咨询帆软技术支持

最佳回答
0
技术支持--哈哈Lv4初级互助
发布于3 小时前
实现步骤
  1. 设置Sheet页背景

    • 确保每个Sheet页的body组件背景设置为「自定义>没有背景」。

  2. 添加JS代码

    • 在每个Sheet页的body组件中,添加相同的初始化后事件,粘贴以下代码(需完整包含动画逻辑):


      function background() {

      $("body").prepend('<canvas id="canvas" style="position:absolute;z-index:-2;"></canvas>');

      var canvas = document.getElementById('canvas'),

      ctx = canvas.getContext('2d'),

      w = canvas.width = window.innerWidth,

      h = canvas.height = window.innerHeight,

      hue = 217,

      stars = [],

      count = 0,

      maxStars = 800;

      // 完整代码见{{JS实现大屏旋转星空背景-3043.md}}  

      animation();

      }

      background();

      $(window).resize(function() { background(); });
  3. 同步所有Sheet页

    • 复制上述代码到每个Sheet页的body组件事件中,确保代码一致。

注意事项
  • 兼容性:此效果仅支持PC端,移动端无效。

  • 性能影响:若Sheet页过多或星空粒子数(maxStars)设置过高,可能影响渲染性能。

效果预览:s2.gif

如需完整代码或模板,可参考:大屏旋转星空背景图.frm

  • 3关注人数
  • 28浏览人数
  • 最后回答于:3 小时前
    请选择关闭问题的原因
    确定 取消
    返回顶部