反馈已提交

网络繁忙

JS实现粒子漩涡背景

  • 文档创建者:L大大
  • 编辑次数:4次
  • 最近更新:RosieY 于 2021-01-26
  • 1. 概述

    1.1 预期效果

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

    粒子背景.gif

    1.2 实现思路

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

    2. 示例

    2.1 报表设计

    以 FineReport .frm 为例,给 body 组件添加一个初始化后事件,JS 代码如下:

    Snag_47bb309.png

    JS 代码如下:

    $("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. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现粒子旋转背景.frm

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

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭