knova繪製進度條
阿新 • • 發佈：2018-11-30
效果：
原始碼：
<!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>