效果：
源码：
<!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>