<script src="https://cdn.bootcss.com/konva/4.2.0/konva.js"></script>
    <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 cenX = stage.width() / 2
        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 innerRect = new Konva.Rect({ 
            x,
            y,
            width: 100,
            height: height,
            opacity: 0.7,
            fill: 'lightblue',
            cornerRadius: height / 2
        })
        layer.add(innerRect)
        //创建一个进度条外框
        var outerRect = new Konva.Rect({ 
            x,
            y,
            width: maxWidth,
            height,
            stroke: 'blue',
            strokeWidth: 2,
            cornerRadius: height / 2
        })
        layer.add(outerRect)
        // Konva 动画效果
        innerRect.to({ 
            width: maxWidth,
            duration: 1.4,
            // opacity: 0.3,
            easing: Konva.Easings.EaseInOut
        })
        layer.draw()
    </script>

原文链接：https://blog.csdn.net/weixin_42164539/article/details/105203045

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。