反馈已提交

网络繁忙

JS实现粒子漩涡背景

  • 文档创建者:L大大
  • 历史版本:6
  • 最近更新:3if7sf4Q 于 2024-03-07
  • 1. 概述

    1.1 预期效果

    大屏场景下,给决策报表添加动态粒子漩涡背景,效果如下图所示:

    star.gif

    1.2 实现思路

    使用 JS 代码来生成动态背景。

    2. 示例

    2.1 报表设计

    以 FineReport .frm 为例,首先将 body 背景设置为「自定义>没有背景」。如下图所示:

    Snag_15f6c8ec.png

    再给 body 添加一个初始化后事件,如下图所示:

    Snag_47bb309.png

    JavaScript 代码如下:

    $("body").prepend('<canvas id="canvas" style="position:absolute;z-index:-2;"></canvas>');
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var w = canvas.width;
    var h = canvas.height;

    var part_count = 600;
    var P = [];
    var X, Y;
    var angle = 0.01;
    var centerX = w * 0.5,
        centerY = h * 0.5;

    var part = function(x,y,ix,iy,vx,vy,a,dist) {
      this.x = x;
      this.y = y;
    this.ix = ix;
      this.iy = iy;
      this.vx = vx;
      this.vy = vy;
      this.a = a;
      this.dist = dist;
    }

    function init(){
      var x,y,ix,iy,vx,vy,a,dist;
      for(var i=0; i<part_count;i++){
        ix = x;
        iy = y;
        vx = random(-1,1);
        vy = random(-1,1);
        rand = random(-80,100);
        dist = part_count/10+i;
        a = 1;
        
        P.push(new part(x,y,ix,iy,vx,vy,a,dist));
      }
    }
    init();

    function bg(){
      ctx.fillStyle = '#000000';
      ctx.globalAlpha=0.9;
      ctx.fillRect(0,0,canvas.width,canvas.height,1);
    }

    function distance(dx,dy){
      return Math.sqrt(dx * dx + dy * dy);
    }

    function draw(){
      for(var i=0; i<P.length;i++){
        var p = P[i];
        
        p.a += 0.008;
        p.x = centerX + Math.cos(i+p.a) * (p.dist*i*0.1);
        p.y = centerY + Math.sin(i+p.a) * (p.dist);
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(p.x, p.y,2, 2);
      }
    }


    function loop(){
      bg();
      draw();
      window.requestAnimationFrame(loop);
    }
    loop();

    function resize(){
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      centerX = window.innerWidth * 0.5;
      centerY = window.innerHeight * 0.5;
    }

    function random(min, max) {
      return Math.random() * (max - min) + min;
    }

    window.onresize = resize;

    2.2 效果预览

    保存决策报表,点击「PC端预览」,效果图如 1.1预期效果 中所示。

    注:不支持移动端。

    3. 模板下载

    点击下载模板:JS实现粒子旋转背景.frm

    附件列表


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

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

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

    不再提示

    10s后关闭

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