canvas实现圆形进度条
2018-12-10 本文已影响11人
雅玲哑铃
先看一下效果图
屏幕快照 2018-12-10 下午10.54.23.png
屏幕快照 2018-12-10 下午10.54.13.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="400" height="400">
80%
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
function draw(percent){
context.beginPath();
context.arc(50,50,50,0,Math.PI*2);
context.strokeStyle = "red";
// context.lineWidth = 1;
context.stroke();
//进度圆
context.beginPath();
var per = 2*Math.PI/100*percent;
context.arc(50,50,40,0,per);
context.lineWidth = 8;
var grd = context.createLinearGradient(0,0,100,0);
grd.addColorStop(0,"blue");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"green");
context.strokeStyle = grd;
context.stroke();
}
function drawText(text){
context.textAlign = "center";
context.textBaseline = "middle";
context.font = "bold 20px 微软雅黑";
context.strokeStyle = "orangered";
context.lineWidth = 2;
context.strokeText(text,50,50);
context.stroke();
}
var start = 0;
setInterval(function(){
//清空画布
context.clearRect(0,0,canvas.width,canvas.height);
var percentText = canvas.innerHTML;
console.log("("+percentText+")"); //有空格
percentText = percentText.trim(); //去掉首尾空格
//去掉百分号
percentText = percentText.substr(0,percentText.length-1);
start++;
if(start>=~~percentText){
start=~~percentText;
}
console.log(percentText);
console.log(typeof ~~percentText);
draw(start);
drawText(start+"%");
},100)
</script>
</html>
干货免费学习啦，哪里不懂可以私信我，一起进步哈！
