JS实现粒子上浮背景

1.1 预期效果

大屏场景下，给决策报表添加一个酷炫的粒子上浮背景，如下图所示：

1.2 实现思路

设置初始化 JS 事件来生成动态背景。

2.1 报表设计

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

新建决策报表，选中 body 组件，添加初始化后事件，如下图所示：

JavaScript 代码如下：

$("body").prepend('<canvas id="canvas" style="position:absolute;z-index:-2;"></canvas>');
//在body中插入canvas画布，并置于底层
var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var Line = function () {
  function Line(x, y, size, color, speed, seed, amplitude) {_classCallCheck(this, Line);
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.speed = speed;
    this.seed = seed;
    this.amplitude = amplitude;
    this.i = this.seed;
  }_createClass(Line, [{ key: 'update', value: function update()
    {
      this.y -= this.speed;
      this.i += this.seed;
    } }, { key: 'draw', value: function draw(
    canvas) {
      var x = this.x + Math.sin(this.i) * this.amplitude;
      canvas.ctx.beginPath();
      canvas.ctx.fillStyle = this.color;
      canvas.ctx.shadowColor = this.color;
      canvas.ctx.shadowBlur = 5;
      canvas.ctx.arc(x, this.y, this.size, 0, 2 * Math.PI);
      canvas.ctx.fill();
      canvas.ctx.closePath();
    } }]);return Line;}();var
Canvas = function () {
  function Canvas(ctx, w, h) {_classCallCheck(this, Canvas);
    this.ctx = ctx;
    this.width = w;
    this.height = h;
    this.scale = 1.0;
    this.lines = [];
  }_createClass(Canvas, [{ key: 'pushParticle', value: function pushParticle()
    {
      var x = Math.random() * this.width;
      var y = this.height + Math.random() * 250;
      var size = 1 + Math.random();
      var g = Math.floor(150 + Math.random() * 50);
      var b = Math.floor(150 + Math.random() * 50);
      var color = 'rgba(120,' + g + ',' + b + ',0.7)';
      var speed = 2 + Math.random() * 1.5;
      var seed = Math.random() / 20;
      var amp = Math.random() * 15;
      this.lines.push(new Line(x, y, size, color, speed, seed, amp));
    } }, { key: 'start', value: function start()
    {
      for (var i = 0; i < 100; i++) {
        this.pushParticle();
      }
    } }, { key: 'update', value: function update()
    {
      for (var i = 0; i < this.lines.length; i++) {
        var line = this.lines[i];
        line.update();
      }
      this.lines = this.lines.filter(function (line) {
        return line.y > -2;
      });
      var toAdd = 100 - this.lines.length;
      if (toAdd === 0) {return;}
      for (var _i = 0; _i < toAdd; _i++) {
        this.pushParticle();
      }
    } }, { key: 'draw', value: function draw()
    {
      this.ctx.shadowColor = '#000';
      this.ctx.shadowBlur = 0;
      this.ctx.globalCompositeOperation = 'source-over';
      this.ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
      this.ctx.fillRect(0, 0, this.width, this.height);
      this.ctx.globalCompositeOperation = 'lighter';
      for (var i = 0; i < this.lines.length; i++) {
        var line = this.lines[i];
        line.draw(this);
      }
    } }]);return Canvas;}();
(function (_) {
  var canvasElement = document.getElementById('canvas'),
  ctx = canvasElement.getContext('2d'),
  canvas = new Canvas(ctx);
  var w = canvasElement.width = window.innerWidth,
  h = canvasElement.height = window.innerHeight,
  density = 1;
  function setup() {
    window.addEventListener('resize', resize);
    density = window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0;
    canvasElement.width = w * density;
    canvasElement.height = h * density;
    canvas.width = w;
    canvas.height = h;
    canvas.scale = density;
    ctx.scale(density, density);
    canvas.start();
    draw();
  }
  function draw() {
    canvas.update();
    canvas.draw();
    window.requestAnimationFrame(draw);
  }
  function resize() {
    w = canvasElement.width = window.innerWidth;
    h = canvasElement.height = window.innerHeight;
    canvasElement.width = w * density;
    canvasElement.height = h * density;
    canvas.width = w;
    canvas.height = h;
    ctx.scale(density, density);
  }
  setup();
})();

2.2 效果预览

保存报表，点击「PC端预览」，效果如预期效果中所示。

注：不支持移动端。

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

点击下载模板：JS实现粒子上浮背景.frm