发表于: 2017-06-22 20:35:43
1 901
今天完成的事:上午开会,下午在弄那个后台模块管理,踩了个大坑。
明天计划的事:做【积分】后台。
困难:
后台的侧边栏是用在后台获取的,所以加模块得用模块管理,看代码里用repeat按level来排序的,找了半天level都没找到,挨个打印都没有level值,去接口文档搜索也没有,后来发现打印出来的有个$$hashKey跟排列顺序一样!隐约觉得找到了真相,结果全局查找发现都是angular自带的,又去网上搜,发现用angular来repeat用post请求回的数据的时候,会产生$$hashKey键值。
收获:
用canvas来画背景图,需要现在html里面加一个canvas代表你要在这个地方画图:
<div class="content blank score-top">
<!--积分页面的账户学分-->
<canvas id="canvas"></canvas>
<div class="user-score">
<img src="../../images/score-user.png">账户学分 <br>
<span>284956</span>
</div>
</div>
然后想,因为要用来做背景图片,上面是要放文字的,要么文字绝对定位,要么canvas自己绝对定位,我选择的是让canvas脱离文档流,需要给父div加个position:relative;然后canvas绝对定位,定在底部,宽度充满整个容器,给高度80%是因为UI图要的效果,可以按实际需要来调整:
.score-top #canvas {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80%;
}
位置固定之后,就是怎么把波浪给画出来,用js来实现,每一步都加了注释:
//背景动画var canvas = document.getElementById('canvas');
//先获取html里的canvas元素
var ctx = canvas.getContext('2d');
//这个现在是默认的,canvas画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;
//定义2条不同波浪的颜色
var lines = ["rgba(255,193,109, 0.4)",
"rgba(157,187,92, 0.2)"];
function loop(){
ctx.clearRect(0,0,canvas.width,canvas.height);
step++;
//画2个不同颜色的矩形
for(var j = lines.length - 1; j >= 0; j--) {
ctx.fillStyle = lines[j];
//每个矩形的角度都不同,每个之间相差120度(可以根据自己的需要来调整)
var angle = (step+j*120)*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();
评论