反饋已提交
網絡繁忙
大屏场景下,给决策报表添加一个酷炫的动态波浪背景,如下图所示:
用户可直接用 JS 代码来制作动态背景。
新建决策报表,另存为:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\33-JS实现动态波浪背景.frm。
点击 body 组件,添加初始化后事件,如下图所示:
JS 代码如下:
$("body").prepend('<canvas id="canvas" style="position:absolute;z-index:-2;"></canvas>');//在body中插入canvas画布,并置于底层var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = canvas.parentNode.offsetWidth; canvas.height = canvas.parentNode.offsetHeight; //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); //初始角度为0 var step = 0; //定义三条不同波浪的颜色 var lines = ["rgba(0,222,255, 0.2)", "rgba(157,192,249, 0.2)", "rgba(0,168,255, 0.2)"]; function loop(){ ctx.clearRect(0,0,canvas.width,canvas.height); step++; //画3个不同颜色的矩形 for(var j = lines.length - 1; j >= 0; j--) { ctx.fillStyle = lines[j]; //每个矩形的角度都不同,每个之间相差45度 var angle = (step+j*45)*Math.PI/180; var deltaHeight = Math.sin(angle) * 50; var deltaHeightRight = Math.cos(angle) * 50; ctx.beginPath(); - ctx.moveTo(0, canvas.height/2+deltaHeight); ctx.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight); ctx.lineTo(canvas.width, canvas.height); ctx.lineTo(0, canvas.height); ctx.lineTo(0, canvas.height/2+deltaHeight); ctx.closePath(); ctx.fill(); } requestAnimFrame(loop); } loop();
保存模板,点击预览,效果如1.1 预期效果所示。
已完成模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\33-JS实现动态波浪背景.frm。
点击下载模板:33-JS实现动态波浪背景.frm
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙