knova绘制进度条

效果：
knova绘制进度条-LMLPHP
源码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>knova绘制进度条</title>

    <style>

        body {

            padding: 0;

            margin: 0;

            background-color: #f0f0f0;

            overflow: hidden;

        }

    </style>

    <script type="text/javascript" src="konva.min.js"></script>

</head>

<body>

<div id="container"></div>

<script>

    var stage = new Konva.Stage({

        container: 'container',

        width: window.innerWidth,

        height: window.innerHeight

    });

    var layer = new Konva.Layer();

    stage.add(layer);

    var progressValueRect = new Konva.Rect({

        x: stage.getWidth() / 8,

        y: stage.getHeight() / 2,

        height: 40,

        width: stage.getWidth() / 8 * 3,

        fill: 'lightblue',

        cornerRadius: 5,

        lineCap: 'round'

    });

    layer.add(progressValueRect);

    var progressLine = new Konva.Rect({

        strokeWidth: 5,

        x: stage.getWidth() / 8,

        y: stage.getHeight() / 2,

        height: 40,

        width: stage.getWidth() / 8 * 6,

        stroke: '#d0d0d0',

        cornerRadius: 5,

        shadowBlur: 4,

        shadowColor: '#f0f0f0',

        shadowOffset: {x : 0, y : 0},

        shadowOpacity: 0.5

    });

    layer.add(progressLine);

    layer.draw();

    layer.draw();

    setInterval(function(){

        if(progressValueRect.width() < progressLine.width() ) {

            progressValueRect.width(progressValueRect.width() + 1);

            layer.batchDraw();

        }

    },20);

    var animate = new Konva.Animation(function(frame){

        var time = frame.time,        //动画执行的时间

            timeDiff = frame.timeDiff,    //上次动画执行到现在的时间

            frameRate = frame.frameRate;    //每秒中执行的帧数

    }, layer);

    animate.start();

</script>

</body>

</html>