我正在尝试创建一个如下所示的自定义进度条:
我想将它与倒计时器结合起来,这样进度条开始完全填满,到计时器结束时应该只有背景。
我创建了这两个 .svg
我想知道应该如何创建这个进度条。
我应该使用 html Canvas 吗?我可以用以下代码绘制箭头:
const ctx = this.arrow.getContext('2d');
const img = new Image(200, 200);
img.src = "../../../assets/positive-arrow-empty.svg";
img.onload = () => {
console.log('loaded', img);
ctx.drawImage(img, 0, 0, 200, 200, );
};
但我不知道如何剪切图像并为整个过程设置动画。
我怎样才能做到这一点,或者有没有比使用 Canvas 更好的方法?
最佳答案
正如其他人所建议的, Canvas 在这里看起来没有必要。如果有的话,它会使整个事情的表现更糟,因为您需要清除整个 Canvas 并在每个帧上重新绘制两个图像。这是使用 clip-path 的解决方案:
const full = document.querySelector('.full')
full.style.clipPath = 'inset(0 0 0 0)'
let time = 5000
const frequency = 50
let clipPercentage = 0
const id = setInterval(() => {
full.style.clipPath = `inset(${clipPercentage}% 0 0 0)`
clipPercentage += 100 / (time / frequency)
if ((time -= frequency) <= 0) {
clearInterval(id)
}
}, frequency)
.full, .empty {
position: absolute;
}
.full {
z-index: 1
}
<img class="full" src="/image/2V4sE.png"></img>
<img class="empty" src="/image/HJtCo.png"></img>
此示例使用 PNG,但 SVG 的工作方式应该相同。
关于javascript - 如何用 2 个 SVG 制作自定义进度条?使用 Canvas ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53344612/