圆环百分比三种实现方式汇总

最新推荐文章于 2025-06-04 13:51:21 发布

weixin_33711641

最新推荐文章于 2025-06-04 13:51:21 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： java c#

原文链接：https://juejin.im/post/5cefdfcd6fb9a07ec56e5d4c

本文汇总了三种实现圆环百分比的方法：使用canvas、svg和css-clip。针对每种方式，分别给出了HTML、CSS和JavaScript的代码示例，并在兼容性和代码简洁性上进行了对比，推荐在考虑兼容性时使用SVG实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

如下图所示,圆环百分比的效果在平常业务中还是有时候需要用到的(比如抢优惠券),借此总结一个几种实现圆环百分比的做法

实现方式

1. canvas实现

html部分代码

<canvas id="circle" height="132px" width="132px">
</canvas>
复制代码

js部分代码

// 1.canvas实现
  circle()
  function circle() {
      var canvas = document.getElementById('circle');
      var ctx = canvas.getContext("2d");

      /*填充文字*/

      ctx.font = "12px Microsoft YaHei";
      /*文字颜色*/
      ctx.fillStyle = '#FF4437';
      /*文字内容*/
      var insertContent = '已抢';
      var text = ctx.measureText(insertContent);
      /*插入文字，后面两个参数为文字的位置*/
      /*此处注意：text.width获得文字的宽度，然后就能计算出文字居中需要的x值*/
      ctx.fillText(insertContent, (132 - text.width) / 2, 68);

      /*填充百分比*/
      var ratioStr = percent + '%';
      var text = ctx.measureText(ratioStr);
      ctx.fillText(ratioStr, (132 - text.width) / 2, 85);

      /*开始圆环*/
      var circleObj = {
          ctx: ctx,
          /*圆心*/
          x: 66,
          y: 66,
          /*半径*/
          radius: 55,
          /*环的宽度*/
          lineWidth: 10
      }
      /*有色的圆环*/
      /*从-90度的地方开始画*/
      circleObj.startAngle = - Math.PI * 2 * 90 / 360;
      /*从当前度数减去-90度*/
      circleObj.endAngle = Math.PI * 2 * (percent / 100 - 0.25);
      circleObj.color = '#FF4437';
      drawCircle(circleObj);
      /*灰色的圆环*/
      /*开始的度数-从上一个结束的位置开始*/
      circleObj.startAngle = circleObj.endAngle;
      /*结束的度数*/
      circleObj.endAngle = Math.PI *