canvas画圆形进度，显示百分比进度

梦里梦外; 2022-12-28 04:17 221阅读 0赞

![在这里插入图片描述][20201214160728417.png_pic_center]

canvas画圆形进度

/** * 圆圈进度 * @param el dom元素 * @param num 进度 * @param color num>0时 字体颜色 * @param lineColor 有进度-线颜色 */
    function drawCircle1(el, num, color, lineColor) { 
      var ctx = el.getContext("2d");
      var w = ctx.canvas.width;
      var h = ctx.canvas.height;
      ctx.scale(2, 2); // 放大2倍 通过css调整大小，1倍时会模糊
      ctx.strokeStyle = '#f1f1f1';
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.arc(28, 28, 26, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.strokeStyle = lineColor;
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.arc(28, 28, 26, 1.5 * Math.PI, (num / 100 * 2 + 1.5) * Math.PI);
      ctx.stroke();
      ctx.font = "14px Arial";
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      if (num == 0) { 
        ctx.fillStyle = '#cccccc'
      } else { 
        ctx.fillStyle = color
      }
      ctx.fillText(num + '%', w/4, h/4);
    }
    
    // 调用
    drawCircle1('dom元素', 8, '#FF9500', '#FF9500')

html中

<canvas class="progress" width="110" height="110" id="canv-dom"></canvas>

[20201214160728417.png_pic_center]: /images/20221120/7989251c501840d2b68ffcdc420defba.png

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Canvas 圆形进度条并显示数字百分比

HTML5 Canvas 圆形进度条并显示数字百分比原文链接：`https://www.cnblogs.com/moqiutao/p/6430079.html` 效

雨点打透心脏的1/2处/ 2023年01月09日 14:27/ 0 赞/ 147 阅读

相关 canvas画圆形进度，显示百分比进度

![在这里插入图片描述][20201214160728417.png_pic_center] canvas画圆形进度 / 圆圈进度 @param el dom元

梦里梦外;/ 2022年12月28日 04:17/ 0 赞/ 222 阅读

相关 js画圆形百分比

\- svg <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

拼搏现实的明天。/ 2022年12月13日 04:04/ 0 赞/ 161 阅读

相关 echarts实现圆形进度条，圆环中心显示进度

目录一：效果图二：环境三：上代码四：巧妙的思路五：参考一：效果图 ![在这里插入图

柔光的暖阳◎/ 2022年11月22日 00:18/ 0 赞/ 962 阅读

相关 canvas动画之一 -- 百分比进度加载

canvas作为H5中重要的新增特性，使开发者可以用它来创作各种令人惊叹的作品。先来看一下浏览器对canvas的支持情况。 ![浏览器支持情况][SouthEast] `<

青旅半醒/ 2022年07月14日 11:49/ 0 赞/ 188 阅读

相关 canvas画圆形图片

效果图： ![70][] 实现环境在微信小程序中参考网站[https://www.jianshu.com/p/9a6ee2648d6f][https_www.ji

谁践踏了优雅/ 2022年05月26日 12:36/ 0 赞/ 256 阅读

相关 Android圆形进度条

自定义圆形进度条，见下图： ![70][] 1、自定义进度条类： package com.example.msh.view; import an

叁歲伎倆/ 2022年05月16日 04:30/ 0 赞/ 519 阅读

相关 canvas画出菱形进度条

效果图： ![70][] 代码： <!DOCTYPE html> <html> <head> <meta charset="u

Myth丶恋晨/ 2022年05月10日 09:26/ 0 赞/ 311 阅读

相关 h5圆形百分比进度条

但不支持IE浏览器：[http://www.htmleaf.com/html5/html5-canvas/201705154511.html][http_www.htmleaf

古城微笑少年丶/ 2022年04月23日 12:26/ 0 赞/ 295 阅读

相关用Canvas画圆环百分比进度条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-eq

浅浅的花香味﹌/ 2021年09月14日 00:14/ 0 赞/ 553 阅读