详解JavaScript+Canvas绘制环形进度条

更新时间：2022年02月11日 15:41:19 作者：聆聽

canvas可以在页面中设定一个区域，再利用JavaScript动态地绘制图像。本文将利用canvas绘制一个可以动的环形进度条。文中的示例代码讲解详细，感兴趣的小伙伴可以动手试一试

效果图

思考

移动端的场景里经常会出现环形进度条的功能，在实现这个功能前，我预想的解决方案大致有： echarts、antv、canvas、svg

前面两种第三方提供的解决方案当然是简单，拿到案例修整一下即可，但是需要下载依赖，而且代码量不小。有没有不需要依赖第三方包，采用原生的写法，独立封装成一个组件，降低耦合，而且性能优越？

当然，那就主要介绍canvas的使用

实现思路

可以展示整个圆、半圆以及任意角度弧形（左右对称）的进度条。整体思路如下：

1.先确定展示的形状，是整个圆、半圆还是一般的弧形

2.把确定好形状的圆弧均分100等份，计算出每一份所占的弧度

3.灰色圆弧占100份，红色圆弧最终占的份数由参数确定

4.设置setInterval定时器，重复执行画图操作

清空画布
先画灰色的圆弧，占100份
再画红色的圆弧：红色圆弧的份数从0开始，每次加1
画红色圆弧末端的红色圆：难点在于根据角度确定红色圆的圆心，这里面涉及到三角函数，在草稿纸上画个图就大致明白了
当红色圆弧的份数达到指定值（传的参数）的时候，清除定时器

具体代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Canvas</title>
</head>
<body>
  <canvas id="canvas" width="300" height="300"></canvas>

  <script>
    draw(66);
    /**
     * [顺时针方向画图，起始点在左侧]
     * @param  {[number]} percent [所占的进度百分比，比如66%，则传66即可，0 <= percent <= 100]
     * @param  {[number]} sR      [圆弧起始角度，可不传，默认是π/2，Math.PI/2 <= sR < 3/2 * Math.PI]
     */
    function draw(percent, sR) {
      if (percent < 0 || percent > 100) {
        return;
      }
      if (sR < Math.PI/2 || sR >= 3/2 * Math.PI) {
        return;
      }

      var canvas = document.querySelector('#canvas'),
          cxt = canvas.getContext('2d'),
          cWidth = canvas.width,
          cHeight = canvas.height,
          baseColor = '#e1e1e1',
          coverColor = '#fe4d43',
          PI = Math.PI,
          sR = sR || 1/2 * PI; // 默认圆弧的起始点弧度为π/2

      var finalRadian = sR + ((PI + (PI - sR) * 2) * percent / 100); // 红圈的终点弧度
      var step = (PI + (PI - sR) * 2)/100; // 一个1%对应的弧度大小
      var text = 0; // 显示的数字
      var timer = setInterval(function() {
        cxt.clearRect(0, 0, cWidth, cHeight);
        var endRadian =  sR + text * step;
        // 画灰色圆弧
        drawCanvas(cWidth/2, cHeight/2, 80, sR, sR + (PI + (PI - sR) * 2), baseColor, 2);
        // 画红色圆弧
        drawCanvas(cWidth/2, cHeight/2, 80, sR, endRadian, coverColor, 2);

        // 画红色圆头
        // 红色圆头其实就是一个圆，关键的是找到其圆心，涉及到三角函数知识，自己画个图一看就明了
        var angle = 2*PI - endRadian; // 转换成逆时针方向的弧度（三角函数中的）
        xPos = Math.cos(angle) * 80 + cWidth/2; // 红色圆 圆心的x坐标
        yPos = -Math.sin(angle) * 80 + cHeight/2; // 红色圆 圆心的y坐标
        drawCanvas(xPos, yPos, 2, 0, 2*PI, coverColor, 2);

        // 数字
        cxt.fillStyle = coverColor;
        cxt.font = '40px PT Sans';
        var textWidth = cxt.measureText(text+'%').width;
        cxt.fillText(text+'%', cWidth/2 - textWidth/2, cHeight/2 + 15);
        text++;

        if (endRadian.toFixed(2) >= finalRadian.toFixed(2)) {
          clearInterval(timer);
        }
      }, 30);

      function drawCanvas(x,y,r,sRadian,eRadian,color,lineWidth) {
        cxt.beginPath();
        cxt.lineCap = "round";
        cxt.strokeStyle = color;
        cxt.lineWidth = lineWidth;
        cxt.arc(x, y, r, sRadian, eRadian, false);
        cxt.stroke();
      }
    }
  </script>
</body>
</html>

关于动画部分，可以使用requestAnimationFrame做优化，函数改写如下：

function draw(percent, sR) {
  if (percent < 0 || percent > 100) {
    return;
  }
  if (sR < Math.PI/2 || sR >= 3/2 * Math.PI) {
    return;
  }

  var canvas = document.querySelector('#canvas'),
      cxt = canvas.getContext('2d'),
      cWidth = canvas.width,
      cHeight = canvas.height,
      baseColor = '#e1e1e1',
      coverColor = '#fe4d43',
      PI = Math.PI,
      sR = sR || 1/2 * PI; // 默认圆弧的起始点弧度为π/2

  var finalRadian = sR + ((PI + (PI - sR) * 2) * percent / 100); // 红圈的终点弧度
  var step = (PI + (PI - sR) * 2)/100; // 一个1%对应的弧度大小
  var text = 0; // 显示的数字

  window.requestAnimationFrame(paint);
  function paint() {
    cxt.clearRect(0, 0, cWidth, cHeight);
    var endRadian =  sR + text * step;
    // 画灰色圆弧
    drawCanvas(cWidth/2, cHeight/2, 80, sR, sR + (PI + (PI - sR) * 2), baseColor, 2);
    // 画红色圆弧
    drawCanvas(cWidth/2, cHeight/2, 80, sR, endRadian, coverColor, 2);

    // 画红色圆头
    // 红色圆头其实就是一个圆，关键的是找到其圆心，涉及到三角函数知识，自己画个图一看就明了
    var angle = 2*PI - endRadian; // 转换成逆时针方向的弧度（三角函数中的）
    xPos = Math.cos(angle) * 80 + cWidth/2; // 红色圆 圆心的x坐标
    yPos = -Math.sin(angle) * 80 + cHeight/2; // 红色圆 圆心的y坐标
    drawCanvas(xPos, yPos, 2, 0, 2*PI, coverColor, 2);

    // 数字
    cxt.fillStyle = coverColor;
    cxt.font = '40px PT Sans';
    var textWidth = cxt.measureText(text+'%').width;
    cxt.fillText(text+'%', cWidth/2 - textWidth/2, cHeight/2 + 15);
    text++;

    if (endRadian.toFixed(2) < finalRadian.toFixed(2)) {
      window.requestAnimationFrame(paint);
    }
  }

  function drawCanvas(x,y,r,sRadian,eRadian,color,lineWidth) {
    cxt.beginPath();
    cxt.lineCap = "round";
    cxt.strokeStyle = color;
    cxt.lineWidth = lineWidth;
    cxt.arc(x, y, r, sRadian, eRadian, false);
    cxt.stroke();
  }

到此这篇关于详解JavaScript+Canvas绘制环形进度条的文章就介绍到这了,更多相关JavaScript Canvas环形进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Bootstrap CSS组件之按钮组(btn-group)
这篇文章主要为大家详细介绍了Bootstrap CSS组件之按钮组(btn-group)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
详解如何较好的使用js
本文将对在网页中引用js常会出现的问题进行汇总，并提出解决问题的具体方案，有助于我们更好的学习和使用js，需要的朋友一起来看下吧
2016-12-12
JavaScript中三个等号和两个等号你了解多少
本篇文章主要介绍了js里面的==和===，== 判断如果两边变量的类型不同，而 === 则不做类型转换，有兴趣的可以了解一下
2017-07-07
js+canvas简单绘制圆圈的方法
这篇文章主要介绍了js+canvas简单绘制圆圈的方法,涉及JavaScript调用canvas组件实现简单图形绘制的相关技巧,需要的朋友可以参考下
2016-01-01
js substring从右边获取指定长度字符串(示例代码)
本篇文章主要是对js substring从右边获取指定长度字符串的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JavaScript用20行代码实现虎年春节倒计时
春节将至，相信大家跟小编一样很激动呀。为了迎接虎年春节到来，小编为大家准备了一个虎年春节倒计时，仅20行代码用js就实现啦。感兴趣的可以动手试一试
2022-01-01
js实现适配移动端的拖动效果
这篇文章主要为大家详细介绍了js实现适配移动端的拖动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
使用JavaScript实现获取audio时长
这篇文章主要为大家详细介绍了如何使用JavaScript实现获取audio时长,并且转换为分钟00:00:00格式,感兴趣的小伙伴可以跟随小编一起学习一下
2024-04-04
一文带你理解JS中的原型和原型链
在学习JavaScript中的继承机制时,我们常常会遇到原型和原型链这两个概念,在初学阶段,不理解这些概念很容易陷入迷茫,甚至会导致学习 JS 的路程变得曲折,本文将介绍JavaScript原型和原型链的概念、设计思想以及相关的使用方法,需要的朋友可以参考下
2023-07-07
完美解决AJAX跨域问题
我看到过很多人不愿意去正视ajax所存在的技术瓶颈，其实AJAX更应该是Ajax而不是AJAX，突出第一个A是想强调其实AJAX发扬的是一种异步传输的方法，而不是具体到底使用了哪种技术
2013-11-11

详解JavaScript+Canvas绘制环形进度条

目录

效果图

思考

实现思路

具体代码实现

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具