小白前端,请教一下大神。
这个是我现在写的,想问一下用svg可以把它写成弧形吗?我现在用的是SVG,是不是用canvas会容易一些?能贴一下代码么?
这个是理想图
这是我HTML代码
<svg id="js-times-svg" >
<defs>
<linearGradient id="color-gradient" x1="0" y1="0%" x2="99.33%" y2="0%" gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color:#62B220"></stop>
<stop offset="100%" style="stop-color:#f6250a"></stop>
</linearGradient>
</defs>
<line x1="0" y1="50" x2="100%" y2="50.001" stroke="#666" stroke-width="30" stroke-dasharray="5 5"></line>
<line id = "colorful" x1="0" y1="50" x2="99.33%" y2="50.001" stroke="url(#color-gradient)" stroke-width="30" stroke-dasharray="5 5" style="transition:all .5s ease;" class="prog"></line>
</svg>
JS:
var i = 0;
var flag = 1;
setInterval(function(){
console.log(document.querySelector("#colorful").setAttribute("x2",i+"%"));
if(flag==1){
if(i==100){
flag = 0;
}
i++;
}else{
if(i==0){
flag = 1;
}
i--;
}
},50);