1. 概述编辑
2. 示例编辑
2.1 新建报表
新建决策报表
2.2 添加初始化后事件
点击 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.3 效果预览
保存模板，点击预览，效果如1.1 预期效果所示。