使用canvas绘制环形进度条

最新推荐文章于 2022-07-21 14:45:42 发布

codeliving

最新推荐文章于 2022-07-21 14:45:42 发布

阅读量648

点赞数

分类专栏： html5 文章标签： canvas绘图

本文链接：https://blog.csdn.net/codeliving/article/details/86617851

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>绘制环形进度条</title>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext(“2d”);
//设置进度条变化的角度
var deg = 0,
//设置起点角度
start = -Math.PI / 2;
var timer = setInterval(function(){
//清除画布
ctx.clearRect(0,0,800,500);
//绘制底圆
ctx.strokeStyle = "#aaa";
ctx.lineWidth = 15;
ctx.beginPath();
ctx.arc(400, 250, 200, 0, Math.PI * 2);
ctx.stroke();
//绘制进度
ctx.beginPath();
deg += 6;
if(deg <= 90){
ctx.strokeStyle = "#f00";
}else if(deg <= 180){
ctx.strokeStyle = "#ff0";
}else{
ctx.strokeStyle = "#0f0";
}
ctx.arc(400,250,200,start,start + deg * Math.PI / 180);
ctx.stroke();
ctx.font = "60px Simhei";
ctx.fillStyle = "#0f0";
//绘制文本进度
var txt = parseInt(deg / 360 * 100) + "%";
ctx.textBaseline = "top";
ctx.fillText(txt,350,220);
if(deg >= 360){
clearInterval(timer);
}
},1000)
</script>
</body>
</html>

codeliving

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用canvas绘制环形进度条

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;绘制环形进度条&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;can
复制链接

扫一扫