Canvas---绘制环形进度图

最近在使用一个进度的地方，UI框架太麻烦，就自己用canvas来花一个进度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<canvas id="canvas" width="200" height="200" style="background:#F7F7F7;">
<p>you browser not support canvas!</p>
</canvas>

</body>

<script type="text/javascript">
var canvas = document.getElementById('canvas'), //获取canvas元素
context = canvas.getContext('2d'), //获取画图环境，指明为2d
centerX = 100, //Canvas中心点x轴坐标
centerY = 100, //Canvas中心点y轴坐标
rad = Math.PI * 2 / 100; //将360度分成100份，那么每一份就是rad度

//绘制蓝色外圈
function blueCircle(n) {
  context.save();
  context.beginPath();
  context.strokeStyle = "red";
  context.lineWidth = 20;
  context.arc(centerX, centerY, 80, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
  context.stroke();
  context.restore();
}

//绘制白色外圈
function whiteCircle() {
  context.save();
  context.beginPath();
  context.strokeStyle = "#A5DEF1";
  context.lineWidth = 20;
  context.arc(centerX, centerY, 80, 0, Math.PI * 2, false);
  context.stroke();
  context.closePath();
  context.restore();
}
whiteCircle();
blueCircle(10);
</script>

</html>

效果：

参考：

https://www.cnblogs.com/qianxiaox/p/14041703.html

打完收工！

posted @ 2022-07-25 11:30  帅到要去报警  阅读(220)  评论(0)    收藏  举报