circle{
-webkit-transition:stroke-dasharray.25s;
transition:stroke-dasharray.25s;
}
stroke-width: 画图的线条宽度
stroke: 画笔使用的颜色
fill: 填充(半径以内都会被填充) -->
第一个参数: 蓝色的周长;
第二个参数: 余下的周长 -->
transform="matrix(0,-1,1,0,0,440)"stroke-dasharray="0 1069"stroke-linecap="round">
拖我：
if(window.addEventListener){
varrange=document.querySelector("#range");
varcircle=document.querySelectorAll("circle")[1];
if(range&&circle){
range.addEventListener("change",function(){
varcircleR=170;
varpercent=this.value/100,perimeter=Math.PI*2*circleR;
// 现有的蓝色弧长加上灰色弧长
circle.setAttribute('stroke-dasharray',perimeter*percent+""+perimeter*(1-percent));
});
}
}
