效果：
源码：
<!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>
原文地址：https://www.cnblogs.com/alex-xxc/p/10043277.html
时间： 2024-11-23 04:38:46