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

2024-09-30 12:59:44

效果图

思考

移动端的场景里经常会出现环形进度条的功能，在实现这个功能前，我预想的解决方案大致有： 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环形进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

js实现增加数字显示的环形进度条效果

效果如下: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <link> <meta name="page-view-size" content="640*530"> <meta http-equiv="Content-Type" content="text/
canvas实现环形进度条效果

昨下午睡着了,晚上打开手机才发现朋友给我发了一个QQ消息,问我这个怎么实现? 这里就选canvas来简单写一下先上代码,然后在说一说需要注意的点: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas环形进度条</title> <style> body{ background-color:#000; text-align:
js+HTML5 canvas 实现简单的加载条(进度条)功能示例

本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas实现加载条动画</title> </head> <body> <canv
canvas实现弧形可拖动进度条效果

一.效果如下: 二. 本文是实现可拖动滑块实现的基本思路,及一个简单的dome,(https://github.com/pangyongsheng/canvas-arc-draw) 三. 1.首先在html中创建一个canvas标签 <canvas id="canvas" width="400" height="400"></canvas> 2.创建一个进度条对象,编写初始化方法,获取canvas对象及上下文环境:eve
JavaScript实现可动的canvas环形进度条

目录介绍 1.创建canvas元素 2.绘制的准备工作 3.绘制环形底层 4.绘制进度层 5.绘制字体并指定位置 6.进度动画介绍今天分享一个环形进度条的写法,当然这只是一个可动的静态进度条,如果你喜欢可以加入后台数据.这种进度条非常简单的写法到处都有,只不过更多的只是写个样子,咱们这个可以动哟. 前提是canvas的属性.方法和一些基础的js API你都知道,当然为了保证一些忘记的小伙伴一下想起来,我会在前面列个表. 属性和方法描述 getContext() 返回一个用于在画布上绘图的
JS实现环形进度条（从0到100%）效果

最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束.动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半. 如图代码如下 demo.html <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
canvas实现简易的圆环进度条效果

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> canvas{ border: 1px solid #1F232A; } .div{ width: 400px; height: 50px; } in
canvas绘制环形进度条

效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.
详解JavaScript+Canvas绘制环形进度条

目录效果图思考实现思路具体代码实现效果图思考移动端的场景里经常会出现环形进度条的功能,在实现这个功能前,我预想的解决方案大致有: echarts.antv.canvas.svg 前面两种第三方提供的解决方案当然是简单,拿到案例修整一下即可,但是需要下载依赖,而且代码量不小.有没有不需要依赖第三方包,采用原生的写法,独立封装成一个组件,降低耦合,而且性能优越? 当然,那就主要介绍canvas的使用实现思路可以展示整个圆.半圆以及任意角度弧形(左右对称)的进度条.整体思路如下: 1
Android使用Canvas绘制圆形进度条效果

前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas 画笔Paint 示例圆形进度条画布Canvas 首先,来看一下Android官网对Canvas类的定义: The Canvas class holds the "draw" calls.To draw something, you need 4 basic components: A B
iOS实现带动画的环形进度条

本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个方法直接看代码为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> @interface LoopProgressView : UIView @property (nonatomic, assign) CGFloat progress; @end .h文件 NSTimer的调用并非精确,可以自行百度这里因为每0.01s启动一次定时器,所以要同步进度条和数字,就将self.
基于 D3.js 绘制动态进度条的实例详解

D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于
JavaScript canvas绘制动态圆环进度条

本文实例为大家分享了JavaScript canvas绘制动态圆环进度条的具体代码,供大家参考,具体内容如下由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) { /* @drawing_elem: 绘制对象 @percent:绘制圆环百分比, 范围[0, 100]
JavaScript canvas绘制圆形加载进度条

本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码,供大家参考,具体内容如下 1.需求:通过canvas绘制一个圆形的进度条 2.实现思路: 2.1 绘制灰色底框 2.2 创建变量保存结束角度值和加载进度值 2.3 创建定时绘制进度条 2.3.1 修改结束角度2.3.2 开始新路径绘制2.3.3 绘制加载圆环 3.实现过程如下: css样式设置 body { text-align: center; } can
JavaScript canvas复刻苹果发布会环形进度条

目录前言基础 Dom 结构基本变量画圆画弧线让画面动起来总结前言 canvas 真是一个好东西,它给前端插上了想象的翅膀,伴随着 h5 而来,将 web 代入了新的领域,基于canvas 技术实现的各种酷炫效果和2d.3d 游戏,也让浏览器能承载更加强大的功能.尤其是它性能还很好,搞游戏再合适不过了,我就喜欢用 canvas 写一些小游戏玩. 在线地址最近无意中看到前段时间写的这个小效果,觉得挺有意思的,就分享出来:这是苹果ios 12 发布会上库克 ppt 里展示的内容,一个

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

目录

效果图

思考

实现思路

具体代码实现

相关推荐

随机推荐