今天完成的事：上午开会，下午在弄那个后台模块管理，踩了个大坑。

明天计划的事：做【积分】后台。

困难：

后台的侧边栏是用在后台获取的，所以加模块得用模块管理，看代码里用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();