反饋已提交
網絡繁忙
大屏场景下,给决策报表添加一个酷炫的粒子穿梭背景,效果如下图所示:
设置初始化 JS 事件来生成动态背景。
点击 body 组件,添加初始化后事件,如下图所示:
JavaScript 代码如下:
$("body").prepend('<canvas id="mycanvas" style="position:absolute;z-index:-2; background-color:black;"></canvas>');var canvas = mycanvas; var w = window.innerWidth;var h = window.innerHeight;canvas.width = w;canvas.height = h;canvas.backgroundColor = "#000";var ctx = canvas.getContext('2d'); function Build() { this.ctx = ctx; this.counts = 3000; this.maxSize = 4; this.halfWidth = w / 2, this.halfHeight = h / 2; this.arr = []; }Build.prototype.add = function(coor) { var grd = this.ctx.createRadialGradient(coor.x, coor.y, coor.size / 2, coor.x, coor.y, coor.size); grd.addColorStop(0, "white"); grd.addColorStop(1, coor.color); this.ctx.fillStyle = grd; this.ctx.beginPath(); this.ctx.arc(coor.x, coor.y, coor.size, 0, Math.PI * 2, true); this.ctx.transform(1, 0, 0, 1, 0, coor.z); this.ctx.closePath(); this.ctx.fill();}Build.prototype.init = function() { this.run(); this.render(); this.animate();}Build.prototype.run = function() { var nums = 0; while (nums < this.counts) { var coor = { x: Math.ceil(Math.random() * w), y: Math.ceil(Math.random() * h), posx: Math.random() * w - this.halfWidth, posy: Math.random() * h - this.halfHeight, fl: 100, speed: Math.random() * 2, posz: Math.random() * 250, r: Math.ceil(Math.random() * this.maxSize), color: "rgba(" + Math.ceil(Math.random() * 255) + "," + Math.ceil(Math.random() * 255) + "," + Math.ceil(Math.random() * 255) + "," + Math.random() + ")" }; this.arr.push(coor); nums++; }}Build.prototype.clear = function() { ctx.clearRect(0, 0, w, h);}Build.prototype.render = function() { this.clear(); for (var item of this.arr) { this.draw(item); }}Build.prototype.animate = function() { var _this = this; this.render(); window.requestAnimationFrame(function() { _this.animate(); }); }, Build.prototype.draw = function(item) { if (item.posz > -item.fl) { var scale = item.fl / (item.fl + item.posz); item.x = this.halfWidth + item.posx * scale; item.y = this.halfHeight + item.posy * scale; item.size = item.r * scale; item.posz -= item.speed; } else { item.posz = Math.random() * 250; } this.add(item); }var app = new Build();app.init();window.addEventListener('resize', function() { canvas.width = w = window.innerWidth; canvas.height = h = window.innerHeight;}, false);
保存模板,点击PC端预览,效果如 1.1 预期效果 中所示。
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现粒子穿梭.frm
点击下载模板:JS实现粒子穿梭.frm
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙