JavaScript通过canvas绘制可以自定义颜色、文字效果的动态环形进度条

已于 2023-09-07 16:12:25 修改
阅读量1.2k 收藏 1
点赞数 2
文章标签： javascript 前端 html
于 2023-05-19 23:52:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40386177/article/details/130775468
版权

前言

早些时候写过的一个大屏项目，其中的环形进度条是使用css来实现的，但是在不同分辨率的情况下会有点问题，如下图所示：**

在这里插入图片描述

为避免这样的问题，现在尝试对以前的功能进行修改，使用canvas进行绘制，并能自定义颜色和文字样式。

1.获取目标div大小，并创建画布，定义需要的值：

  <div id="myCanvas" style="width:100px;height:100px"></div>
  <script>

 //  获取 canvas 元素和 2D 绘图上下文对象
    const container = document.getElementById(arg.container);
     if (!container) {
      // 容器不存在
      throw new Error('容器不存在')
    }
     const canvas = document.createElement('canvas')
     // 设置画布在页面上的大小
     canvas.style = `width:${container.clientWidth}px; height:${container.clientHeight}px;`;
    const ctx = canvas.getContext('2d');
     // 设置画布内容是容器的两倍不容易出现图像边缘不清晰
    canvas.width = container.clientWidth * 2
    canvas.height = container.clientHeight * 2
    container.append(canvas)
        //  设置进度条背景颜色和前景颜色
    // 进度条宽度
    const progressSize = arg.progressSize || 23
    // 圆大小
    const circleSize = canvas.width / 2
    // 中间圆大小
    const circle_center = circleSize - progressSize
    // 圆xy坐标
    const cx = canvas.width / 2
    const cy = canvas.height / 2
    // 剪切同心圆需要的
    let step = 0.8

    // 圆的初始角度和结束时的角度
    let inputData = typeof +arg.data === 'number' && !isNaN(+arg.data) ? arg.data : 0
    // 进度条从0-100的角度是从0.7-2.3
    const initialProgress = 0.7
    const totalFrames = 2.3;
    let progressValue = initialProgress

    // 根据传进来的数值，计算目前的角度
    let angle = (totalFrames - initialProgress) / 100
    let progressEnd = initialProgress + angle * inputData;

2.绘制圆，因为我们所需要的圆是缺了一角的，使用arc() 方法进行画圆，如下图所示
在这里插入图片描述
根据官方的api，设置开始角度为0.7，结束角度为2.3，绘制进度条背景圆

    // 绘制进度条背景
    ctx.beginPath();
    ctx.moveTo(cx, cy)
    ctx.fillStyle = arg.backgroundColor;
    ctx.arc(cx, cy, circleSize, initialProgress * Math.PI, totalFrames * Math.PI)
    ctx.fill()

效果如下所示：
在这里插入图片描述
3.使用同样的方法绘画前景圆，并添加动画效果：

      // 定义动画函数，每帧更新进度值并重新绘制进度条
    function animate () {

      if (progressValue >= progressEnd) {
        return
      }
      // 更新进度值
      progressValue += 0.03;
      if (progressValue > progressEnd) {
        progress = progressEnd
      }

      // 渐变颜色
      ctx.beginPath();
      let grd;
      if (arg.LinearGradient && Object.keys(arg.LinearGradient).length != 0) {
        grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
        grd.addColorStop(0, arg.LinearGradient.start || arg.LinearGradient.stop)
        grd.addColorStop(1, arg.LinearGradient.stop || arg.LinearGradient.start)
      } else {
        grd = arg.foregroundColor || '#1B64ED'
      }
      ctx.fillStyle = grd
      ctx.moveTo(cx, cy)
      // 2.3满格
      ctx.arc(cx, cy, circleSize, initialProgress * Math.PI, progressValue * Math.PI);
      ctx.fill()
      //  检查是否达到最大帧数，如果没有则继续动画，否则停止动画
      requestAnimationFrame(animate);
      step = 0
      // 剪切圆
      clearArc(cx, cy, circle_center)
    }

在这里插入图片描述
4.中心剪切圆，因为没有直接剪切掉圆形的方法，所以使用很多个矩形堆叠成圆形的方法进行剪切，剪切完成之后添加中间的文字。

    function clearArc (x, y, radius) {
      let arcWidth = radius - step
      // Math.sqrt 求平方根
      let arcHeight = Math.sqrt(radius * radius - arcWidth * arcWidth)

      let posX = x - arcWidth
      let posY = y - arcHeight

      let widthX = 2 * arcWidth
      let heightY = 2 * arcHeight
      if (step <= radius) {
        ctx.clearRect(posX, posY, widthX, heightY)
        step += 0.8
        clearArc(x, y, radius)
      } else {
        // 文字
        if (arg.fontShow) {
          ctx.font = `${arg.fontSize || 16}px ${arg.fontFamily}`;
          ctx.fillStyle = arg.fontColor || '#000'
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle'
          ctx.fillText(inputData + '%', cx, cy);
        }

      }
    }

在这里插入图片描述

完整的代码如下：

<!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>环形进度条</title>
</head>
<style>
  @font-face {
    font-family: ledFont;
    src: url('./font/DS-DIGI.TTF'); /*自定义字体*/
  }
</style>

<body>
  <div style="display: flex">
    <div id="myCanvas" style="width:100px;height:100px"></div>
  </div>


</body>
<script>
  initProgress({
    container: 'myCanvas', // 容器
    backgroundColor: '#ddd', // 进度条背景颜色
    foregroundColor: '#000', // 进度条前景色
    LinearGradient: {  // 如果前景色需要设置渐变
      start: '#1B64ED',
      stop: '#04E8F6'
    },
    progressSize: 22, // 进度条宽度
    data: 83.33,
    fontShow: true,
    fontSize: 40,
    fontFamily: 'ledFont',
    fontColor: '#16B7C8'
  })

  function initProgress (arg) {
    //  获取 canvas 元素和 2D 绘图上下文对象
    const container = document.getElementById(arg.container);
    if (!container) {
      // 容器不存在
      throw new Error('容器不存在')
    }
    const canvas = document.createElement('canvas')
    canvas.style = `width:${container.clientWidth}px; height:${container.clientHeight}px;`;
    const ctx = canvas.getContext('2d');
    // 画布是容器的两倍不容易出现图像边缘不清晰
    canvas.width = container.clientWidth * 2
    canvas.height = container.clientHeight * 2
    container.append(canvas)
    //  设置进度条背景颜色和前景颜色
    // 进度条宽度
    const progressSize = arg.progressSize || 23
    // 圆大小
    const circleSize = canvas.width / 2
    // 中间圆大小
    const circle_center = circleSize - progressSize
    // 圆xy坐标
    const cx = canvas.width / 2
    const cy = canvas.height / 2

    // 剪切同心圆需要的
    let step = 0.8

    // 圆的初始角度和结束时的角度
    let inputData = typeof +arg.data === 'number' && !isNaN(+arg.data) ? arg.data : 0
    // 进度条从0-100的角度是从0.7-2.3
    const initialProgress = 0.7
    const totalFrames = 2.3;
    let progressValue = initialProgress

    // 根据传进来的数值，计算目前的角度
    let angle = (totalFrames - initialProgress) / 100
    let progressEnd = initialProgress + angle * inputData;

    // 绘制进度条背景
    ctx.beginPath();
    ctx.moveTo(cx, cy)
    ctx.fillStyle = arg.backgroundColor;
    ctx.arc(cx, cy, circleSize, initialProgress * Math.PI, totalFrames * Math.PI)
    ctx.fill()


    // 切掉圆心 圆心(x,y)，半径radius
 
    function clearArc (x, y, radius) {
      let arcWidth = radius - step
      // Math.sqrt 求平方根
      let arcHeight = Math.sqrt(radius * radius - arcWidth * arcWidth)

      let posX = x - arcWidth
      let posY = y - arcHeight

      let widthX = 2 * arcWidth
      let heightY = 2 * arcHeight
      if (step <= radius) {
        ctx.clearRect(posX, posY, widthX, heightY)
        step += 0.8
        clearArc(x, y, radius)
      } else {
        // 文字
        if (arg.fontShow) {
          ctx.font = `${arg.fontSize || 16}px ${arg.fontFamily}`;
          ctx.fillStyle = arg.fontColor || '#000'
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle'
          ctx.fillText(inputData + '%', cx, cy);
        }

      }
    }



    // 定义动画函数，每帧更新进度值并重新绘制进度条
    function animate () {

      if (progressValue >= progressEnd) {
        return
      }
      // 更新进度值
      progressValue += 0.03;
      if (progressValue > progressEnd) {
        progressValue= progressEnd
      }

      // 渐变颜色
      ctx.beginPath();
      let grd;
      if (arg.LinearGradient && Object.keys(arg.LinearGradient).length != 0) {
        grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
        grd.addColorStop(0, arg.LinearGradient.start || arg.LinearGradient.stop)
        grd.addColorStop(1, arg.LinearGradient.stop || arg.LinearGradient.start)
      } else {
        grd = arg.foregroundColor || '#1B64ED'
      }
      ctx.fillStyle = grd
      ctx.moveTo(cx, cy)
      // 2.3满格
      ctx.arc(cx, cy, circleSize, initialProgress * Math.PI, progressValue * Math.PI);
      ctx.fill()
      //  检查是否达到最大帧数，如果没有则继续动画，否则停止动画
      requestAnimationFrame(animate);
      step = 0
      clearArc(cx, cy, circle_center)

    }

    // 开始动画
    animate();


  }

</script>

</html>
折花入酒丶
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas文本居中和自定义颜色
hlxjg的博客
07-06 1064
canvas自定义颜色与文字居中
Canvas画文字、渐变文字以及调整文字位置
katherin_wanzi的博客
07-03 4516
一.画文字 代码如下： <style> canvas { margin: 0 auto; border: 2px solid #aaa; display: block; /*画布居中*/ } </style> <body> <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas> &
【js学习笔记-114】----<canvas>矩形、颜色、透明度、渐变及图案
Will 的专栏
04-02 1万+
矩形、颜色、透明度、渐变及图案（感觉没怎么懂！！先放这吧，回产头再研究） 矩形 CanvasRenderingContext2D对象定义了4个用于绘制矩形的方法 都接受两个参数，其中一个指定矩形的一个顶点，另一个参数指定矩形的宽高 n  fillRect() 使用fillStyle来填充指定矩形。 n  strokeRect() strokeStyle和其它线段的属性来勾勒指定的矩形
原生 js 画环形进度条
最新发布
工作中遇到问题记录
05-07 578
原生 js 画环形进度条
JavaScript 之 canvas（四）-- 绘制文字
热门推荐
一只小鹰
10-03 2万+
本文原文地址：https://www.jeremyjone.com/485/， 转载请注明，谢谢。 基本概念 在canvas中，为我们提供了一个非常方便的添加文字的方法，直接上 w3school 的文档说明： context.fillText(text,x,y,maxWidth); // text: 规定在画布上输出的文本。 // x: 开始绘制文本的 x 坐标位置（相对于画布）。 // y:...
canvas 文字颜色_丰富Canvas的应用
weixin_39632467的博客
11-28 256
这篇文章主要分享介绍了多媒体样式，Canvas填充、文本以及图片等多媒体样式应用, 结合状态保存与恢复介绍了Canvas如何绘制多彩的内容。1：添加样式主要有填充样式（fillStyle），轮廓的样式（strokeStyle），然后还有一个透明度（transparency）和线条样式（line style）。它们有一个共同的属性是设置之后都会成为默认属性。填充样式填充（fillStyle），填充最...
前端之学习 canvas 的基础语法
weixin_53817560的博客
02-08 658
前端之学习 canvas 的基础语法 前言 今天，学习了 canvas 的一些语法知识和使用，在这里分享给大家一起学习交流 首先，我们应该了解 canvas 是什么，有什么用，文章最后，我们将使用 canvas 绘制一个刮刮卡的中奖特效！ 什么是 canvas 定义：是 HTML5 提供的一种新标签, ie9 才开始支持的，Canvas 是一个矩形区域的画布，可以用 JS 控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘
canvas绘制环形进度条
08-31
通过以上步骤，我们可以创建一个动态的环形进度条，根据`data-curr`属性实时更新进度。这个组件适用于许多应用场景，如监控任务状态、显示健康指标等。需要注意的是，如果需要动态更新进度，可以监听事件或定时器，...
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
Canvas 2D 提供了一套丰富的绘图接口，让我们能够动态绘制复杂的图形，如环形进度条。 首先，我们需要了解canvas的基本使用。在HTML中，`<canvas>`元素是一个画布，我们可以使用JavaScript的`...
小程序环形进度条，百分比动态展示 可自定义效果，canvas画图
12-08
本项目“小程序环形进度条”就是一个很好的例子，它利用canvas API提供了动态展示百分比的功能，允许用户根据需求自定义效果。下面将详细探讨这个小程序组件的工作原理、关键代码及其实现方法。 首先，我们需要了解...
微信小程序自定义组件实现环形进度条
10-16
在实际开发中，环形进度条的绘制通常会通过`canvas`的`drawArc`方法来实现，根据`value`和`maxValue`计算弧度，然后利用`wx.createSelectorQuery()`和`wx.canvasToTempFilePath()`等API进行绘制和更新。然而，这部分...
canvas实现简易的圆环进度条效果
08-31
Canvas 提供了一个二维绘图环境，通过 JavaScript API 可以进行各种图形操作，如绘制线条、填充形状、绘制文本等。在本例中，我们将创建一个圆环形的进度条，它由一个闭合的弧线和显示进度的文本组成。 代码中，...
用javascript动态改变网页文字大小
weixin_30629653的博客
08-08 542
<script>function setFontSize(size){document.getElementById('bottom').style.fontsize=size+'pt';}</script> 以上代码执行不了，找了半天才发现原来是fontSize出了问题，太马虎了。。。。= =，一定要注意呀，不要写成fontsize，记住这个教训，一定要注意大小写问题！...
canvas实现字体颜色渐变及解析
weixin_42062619的博客
03-07 4227
canvas HTML代码： 您的浏览器不支持HTML5canvas标签 canvas javascriput代码: 解析： 1.c.getContext(“2d”)：getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路 径、矩形、圆形、字符以及添加图像的方法 2.createLinearGradient(0,0,c.width,0);：createLine...
Canvas---文字的绘制
RainMcCom的博客
08-22 2384
文字1.与Paint相关的设置//普通设置 paint.setStrokeWidth (5);//设置画笔宽度 paint.setAntiAlias(true); //指定是否使用抗锯齿功能，如果使用，会使绘图速度变慢 paint.setStyle(Paint.Style.FILL);//绘图样式，对于设文字和几何图形都有效 paint.setTextAlign(Align.CENT
【js】canvas字体不生效，解决字体加载过慢问题
这道题我不会做...不会做啊..太难了！！
04-14 2358
问题 使用@font-face引入外部字体后，因为加载需要时间，而script中canvas字体渲染时，没有检测到引入的字体，将会使用默认字体 @font-face { font-family: 'en'; src: url('./font/font.ttf'); } let canvas = document.querySelector('canvas') let ctx = canvas.getContext('2d') ctx.clearRect(0, 0, 200, 200) ctx.
Canvas画文本时设置某些文本颜色与其他不同
Come丶On
05-09 7593
效果图 直接看效果图 分析一波 就是控件下面的一行文本，用canvas画出来，而不是用TextView(当然你用TextView也是可以实现的，本文不做讨论)。 我们用canvas画文本的方法是drawText(@NonNull String text, float x, float y, @NonNull Paint paint)，简单介绍一下这个方法穿的参数值，text：要画的文本，x：起点...
HTML5画布如何设置字体颜色
flower_517的博客
03-25 1万+
在HTML5画布中我们可以使用fillStyle属性来设置文本的字体颜色，它可以接受一个颜色的代码值，比如#cc0000，也可以接受一个颜色的英文单词，比如red。下面我们就来了解一下，希望对大家有所帮助。 首先我们需要在HTML页面中使用canvas标签创建一个画布，设置其id值为myCanvas。 然后使用JavaScript在画布中绘制文本图形 1、获取到canvas控件 2、使用get...
HTML5 Canvas绘图之文字的渲染
Daisy花园
02-09 1万+
文字渲染基础context.font=”bold 40px Arial” font属性可以接受css的font属性context.fillText(string,x,y,[maxlen]) string指定位置，(x,y)指定位置 context的fillestyle属性设置字体属性 maxlen可选，表示绘制这段文字最长的宽度window.onload=function(){ v
通过Paint和Canvas绘制动态的打勾和打叉效果
06-06
要在Paint和Canvas上绘制动态的打勾和打叉效果，可以按照以下步骤进行： 1. 创建一个自定义的View，重写它的onDraw()方法。 2. 在onDraw()方法中，使用Canvas绘制一个圆圈，并设置圆圈的颜色和边框宽度。 3. 绘制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值