base-canvas
/
07Konva封装进度条案例.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 放我们的舞台 -->
    <div id="container"></div>
    <script src="js/bower_components/konva/konva.min.js"></script>
    <script src="js/07ProgressBar.js"></script>
    <script>
         // 创建舞台
         var stage = new Konva.Stage({
            container: 'container', // 需要存放舞台的dom容器
            width: window.innerWidth, // 设置全屏
            height: window.innerHeight
        });
        // 创建层
        var layer = new Konva.Layer(); // 创建一个层
        stage.add(layer); // 把层添加到舞台

        // 中心点坐标
        var cenX = stage.width()/2; // 注意Konva获取数据都是用方法获取值
        var cenY = stage.height()/2;

        var x = 1/8 * stage.width();
        var y = cenY;

        var height = 1/12 * stage.height();
        var maxWidth = 3/4 * stage.width();

        var p = new ProgressBar({
            x: x,
            y: y,
            width: maxWidth,
            height: height,
            fillStyle: 'blue',
            strokeStyle: '#999'
        })
        p.addToGroupOrLayer(layer);
        layer.draw();
        p.changeValue(.6);
    </script>
</body>
</html>