百分比html模板,百分比.html

// 技能

var c = document.getElementById("process");

var ctx = c.getContext('2d');

var centerX = c.width/2; //Canvas中心点x轴坐标

var centerY = c.height/2; //Canvas中心点y轴坐标

var rad = Math.PI*2/100; //将360度分成100份，那么每一份就是rad度

var speed = 0.4; //加载的快慢就靠它了

var sec = document.getElementById("section-5th");

//滚动条距离顶部高度

window.onscroll = function(){

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

if(sec.offsetTop < scrollTop + 100 && speed < 80){

animate();

}

}

animate();

function animate(){

window.requestAnimationFrame(function(){

if(speed < 80 ){

animate();

}

});

ctx.clearRect(0, 0, c.width, c.height);

speed += 0.4;

drawCircle(ctx,speed);

};

function drawCircle(ctx,percent){

//画白色的静态圆

ctx.save();

ctx.strokeStyle = "#D8CCBE";

ctx.lineWidth = 12;

ctx.beginPath();

ctx.arc(centerX, centerY, 68, 0, Math.PI*2, false);

ctx.stroke();

ctx.closePath();

ctx.restore();

//画进度环

ctx.save();

ctx.strokeStyle = "#E87E04";

ctx.lineWidth = 12;

ctx.beginPath();

ctx.arc(centerX, centerY, 68, -Math.PI/2, -Math.PI/2 +percent*rad, false);

ctx.stroke();

ctx.closePath();

ctx.restore();

//百分比文字绘制

ctx.save();

ctx.fillStyle = "#474d5d";

ctx.font = "bold 21px Arial";

//绘制字体并指定位置

ctx.fillText(percent.toFixed(0) + '%', centerX-20, centerY+10);

ctx.restore();

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史