canvas 环形进度条 示例 封装

最新推荐文章于 2022-06-13 12:16:02 发布
最新推荐文章于 2022-06-13 12:16:02 发布
阅读量164 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/105788769
版权

在这里插入图片描述

示例

思路整理

用canvas绘制一个环形
在把一个 标注定位在canvas上方 （也可以用canvas绘制）

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环形进度条-canvas-函数封装</title>
    <style>
        ._con_{
            width: 300px;
            height: 300px;
            outline: 1px solid;
            position: relative;
        }
        ._con_ > .text{
            height: 100%;
            text-align: center;
            position: absolute;
            top: 0;
            width: 100%;
            line-height: 300px;
        }

    </style>
</head>
<body>
    <div class="_con_">
        <canvas id="mycanvas" width="300" height="300"></canvas>
        <div class="text">  </div>
    </div>


    <script>

        // 宽高直接写在标签上
        const ctx = document.getElementById("mycanvas").getContext("2d");

		//外圆环
        ctx.beginPath();
        // 中心坐标 x y 半径 起始角（弧的圆形的三点钟位置是 0 度） 结束角 counterclockwise：False = 顺时针，true = 逆时针。
		ctx.arc(150, 150, 100, 0, 2 * Math.PI); // 
		ctx.strokeStyle = "#fff";  // 边界颜色 类似 border
		ctx.fillStyle = "#EDEDED"; // 填充色
		ctx.fill(); // 进行填充
        ctx.stroke(); 
        
        //内圆环
		// ctx.beginPath();
		// ctx.arc(150, 150, 90, 0, 2 * Math.PI);
		// ctx.strokeStyle = "#fff";
		// ctx.fillStyle = "#fff";
		// ctx.fill();
        // ctx.stroke();

        var text = document.getElementsByClassName("text")[0]
        console.log(text)
        var press = 0.9,percent = 0
        function animate(){
            requestAnimationFrame(function (){ //屏幕刷新频率
                fun()
                text.innerText =  (percent * 100).toFixed(0) + "%"
                percent += 0.05
                if (percent < press) {
                    animate();
                }
            });
        }

        animate()

        // 圆环
        function fun(){
             //  1.5 -0.5  1  -0.5 
            // 1.5*Math.PI 正上方
            // 画圆 填充边界线 内部填充  Math.PI = 180度   
            ctx.beginPath(); 
            // 顺时针 -Math.PI / 2,-Math.PI / 2 + percent * (Math.PI * 2),false)
            // 逆时针 1.5*Math.PI, (1.5-(percent*2))
            ctx.arc( 150,150, 96, 1.5*Math.PI, (1.5-(percent*2))*Math.PI ,true);
            ctx.lineWidth = 8;
            ctx.lineCap = "round"; // lineCap 属性设置或返回线条末端线帽的样式。
            ctx.strokeStyle = "#19c6c1"//"rgb(255, 127, 105)";
            ctx.stroke();
        }


    </script>
</body>
</html>
效果

在这里插入图片描述

封装

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环形进度条-canvas-函数封装</title>
</head>
<body>
    <div class="con"></div>

    <script>
        function LoopProgress(obj){
            this.container = obj.container;  // 进度条放置容器
            this.gress = obj.gress;   // 初始进度
            this.width = parseInt(obj.width || '400px'); 
            this.height = parseInt(obj.height || '400px');
            this.lineColor = obj.lineColor || "#00fd54"; //进度条颜色
            this.lineWidth =  parseInt(obj.lineWidth || 15),  //进度条宽度
            // this.animationTime = obj.animationTime || 1;   //进度条时间
            this.textDom = obj.textDom  // 中间文本对象
            this.textDomFun = obj.textDomFun // 中间文本对象更新回调函数
            this.dom;
            this.canvas;
            this.ctx;
            this.text;
        }

        var container = document.getElementsByClassName("con")[0]
        

        LoopProgress.prototype.init = function(){
            this.dom = this.createDom()
            this.container.appendChild(this.dom)
            this.canvasInit()
            this.textInit(0)
            this.setPerss()
        }

        // 生成dom节点
        LoopProgress.prototype.createDom = function(){
            var con = document.createElement("div")
            var canvas = document.createElement("canvas")
            var text = document.createElement("div")

            con.style.width = this.width + "px"
            con.style.height = this.height + "px"
            con.style.position = "relative"

            canvas.setAttribute("width",this.width)
            canvas.setAttribute("height",this.height)

            text.style.width = this.width + "px"
            text.style.height = this.height + "px"
            text.style.lineHeight = this.height + "px"
            text.style.position = "absolute"
            text.style.top = "0"
            text.style.textAlign = "center"
            
            con.appendChild(canvas)
            con.appendChild(text)

            this.canvas = canvas
            this.text = text
            return con
        }

        // canvas 初始化 文字初始化
        LoopProgress.prototype.canvasInit = function(){
            var ctx = this.canvas.getContext("2d");
            ctx.beginPath();
            // 中心坐标 x y 半径 起始角（弧的圆形的三点钟位置是 0 度） 结束角 counterclockwise：False = 顺时针，true = 逆时针。
            ctx.arc(this.width/2, this.height/2, this.height/2, 0, 2 * Math.PI); // 
            ctx.strokeStyle = "#fff";  // 边界颜色 类似 border
            ctx.fillStyle = "#EDEDED"; // 填充色
            ctx.fill(); // 进行填充
            ctx.stroke(); 
            this.ctx = ctx
            this.setAnnulus(0)
        }

        //  绘制圆环 
        LoopProgress.prototype.setAnnulus = function(percent){
            // 1.5*Math.PI 正上方
            // 画圆 填充边界线 内部填充  Math.PI = 180度   
            this.ctx.beginPath(); 
            // 顺时针 -Math.PI / 2,-Math.PI / 2 + percent * (Math.PI * 2),false)
            // 逆时针 1.5*Math.PI, (1.5-(percent*2))
            this.ctx.arc(this.width/2,this.height/2, this.height/2 - this.lineWidth/2, 1.5*Math.PI, (1.5-(percent*2))*Math.PI ,true);
            this.ctx.lineWidth = this.lineWidth;
            this.ctx.lineCap = "round"; // lineCap 属性设置或返回线条末端线帽的样式。
            this.ctx.strokeStyle = this.lineColor;
            this.ctx.stroke();
        }

        LoopProgress.prototype.textInit = function(num){
            !this.textDom ? this.text.innerText = num + "%" : this.text.innerHTML = this.textDom,this.textDomFun(this.text.children)
        }

        // 动态更新
        LoopProgress.prototype.setPerss = function(){
            var _this = this,
                percent = 0;

            var time = new Date().getTime()
            animate()
            function animate(){
                requestAnimationFrame(function (){ //屏幕刷新频率
                // console.log("percent:",percent,(percent * 100).toFixed(0))
                _this.setAnnulus(percent)
                _this.textInit((percent * 100).toFixed(0))
                percent += 0.05
                if (percent <= parseInt(_this.gress)*0.01) {
                    animate();
                }
            });
            }  
        }

        // 销毁
        LoopProgress.prototype.close = function(obj){
            this.dom.remove()
            obj = null
        }

        var img = document.getElementsByClassName("img")[0]
        var loop = new LoopProgress({
            container:container,
            gress:"70",
            width:"400",
            height:"400",
            lineWidth:"15",
            textDom:'<div class="img" style="width: 200px;height: 200px;"  alt="">xxx</div>',// 是否设置中间部分
            textDomFun:function(e){ // 设置之后的回调
                console.log("textDomFun",e[0])
            }
        })

        loop.init()
        var loop2 = new LoopProgress({
            container:container,
            gress:"40",
            width:"100",
            height:"100",
            lineWidth:"10",
            textDom:"" ,// 是否设置中间部分
            textDomFun:function(){ // 设置之后的回调

            }
        })

        loop2.init()
        var loop3 = new LoopProgress({
            container:container,
            gress:"30",
            width:"200",
            height:"200",
            lineWidth:"45",
            textDom:"" ,// 是否设置中间部分
            textDomFun:function(){ // 设置之后的回调

            }
        })

        loop3.init()
    </script>
</body>
</html>
效果

在这里插入图片描述

tianmeng1999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 环形进度条 组件封装
sally18的博客
07-31 3303
子组件circle： <template> <div :style="svgStyle"> <svg :style="svgStyle"> <!-- 内边框 --> <path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :...
用 es6 的 class 类单例模式封装 canvas 环形进度条
cafehaus的博客
02-23 164
项目中需要一个请求进度效果，尝试了下自己用 canvas 来绘制一个环形进度条，动效直接用的休眠函数加随机数来模拟。用到了 es6 里的 class 类，用单例模式的懒汉模式来实例化对象，不像 Java 这种纯面向对象的语言，写着还是有点别扭
Canvas 画环形进度条
Sparkler123的博客
07-11 208
JS代码如下： function draw(ctx, rate) { ctx.clearRect(0,0,300,300); ctx.beginPath(); ctx.strokeStyle = "gray"; ctx.arc(150, 150, 100, (1/3)*Math.PI, (2/3)*Math.PI, true); ctx.stroke(); c...
uni-app 半圆进度条封装
每天都要努力学习哦~~
06-13 2277
uniapp 半圆进度条
html5 canvas 原生 javascript 实现 饼状图实例 加介绍
银河系天城知识宝库_技术专家蒋浩宇
06-21 405
图片 重点 //一数据开始结束角度 ctx.arc(100, 100, 50, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, true); //2数据开始结束角度 ctx.arc(100, 100, 50, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, Math.PI * 1.5 ...
canvas实现环形进度条效果
08-31
Canvas 实现环形进度条效果 本文主要介绍了使用 Canvas 实现环形进度条效果的实例，具有很好的参考价值。下面，我们来详细介绍这个实例。 知识点 1：Canvas 基础 Canvas 是 HTML5 中的一个重要元素，用于创建图形...
canvas 环形进度条
04-15
canvans 环形进度条 可动态的控制进度 而且是渐变模式
canvas画环形进度条
08-28
<title>Canvas环形进度条 canvas { border: 1px solid #ccc; } <canvas id="progressCanvas" width="200" height="200"></canvas> <script src="CanvasTest.js"></script> ``` 接下来，我们将在`...
canvas绘制环形进度条
08-31
在本文中，我们将深入探讨如何使用HTML5的`canvas`元素来绘制环形进度条。环形进度条是一种常见的UI组件，通常用于显示任务或进程完成的百分比。以下是如何利用`canvas`实现这一功能的详细步骤和相关知识点： 1. **...
利用js、jQuery和css实现环形进度条组件封装
zyq19931019的博客
03-22 1911
效果图： html： 进度条 设置百分比: 设置颜色: 设置文本: js：function ProcessBar() { this.Container = $(""); this.Container.addClass("Container"); this.circle = $(""); this.circle.addClass("ci
canvas arc()方法详解
热门推荐
记得笑的博客
12-14 1万+
arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);六个参数对应的意思： x,y表示圆心坐标 r 表示圆的半径 sAngle : 表示开始绘制的角度 eAngle : 表示结束绘制的角度 counterclockwise ： 表示顺时针绘制还是逆时针，false = 顺时针，t...
canvas --用循环画圆
Yannnnnm的博客
10-03 1372
本篇博客主要介绍圆方面的应用 在canvas中绘制圆形, 我们将使用以下方法:arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean)，前面为圆心坐标，半径，开始角度，结束角度，顺时针或是逆时针，可用fasle，或true或1和0等 栗子 这里我们用一个综合的栗子来说明 假如我们要实现这个效果，那么我们应该怎么做呢？可以先思考一下 第一步 创建一个canv
html5 canvas 原生 javascript 实现 饼状图 扇型方向 顺时针 语法和逆时针语法
银河系天城知识宝库_技术专家蒋浩宇
06-21 766
逆时针饼状图话扇子 60% 图片 code: var c = document.getElementById("canvasmain"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(100, 100); ctx.ar...
利用canvas制作进度条实践
lakenQi
10-23 1446
开门见字 之前写过一篇H5新标签progress进度条的使用文章，当时觉得研究的还行，但是发现，这个标签在不同浏览器中样式表现是不一致的，如下： chrome中：，一抹蓝色划过天际； 火狐中：，一片绿色大森林； IE中：，一群小点排排坐。 够了，完全不着边际的不一致，就这三大家都各有各的想法，不敢想象其他人了，且本人不才，没有研究出CSS修改progress的方法。当然如果不在乎这些差别...
蒙牛智能化改造解决方案.docx
08-17
蒙牛智能化改造解决方案.docx
java基于ssm+jsp BS架构的学生档案管理系统源码 带毕业论文
08-17
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
机械行业数字化生产供应链产品解决方案.pdf
08-17
机械行业数字化生产供应链产品解决方案.pdf
基于python的个人博客系统的设计与实现代码（包含数据库）
08-17
基于python的个人博客系统的设计与实现代码（包含数据库），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 基于python的个人博客系统的设计与实现代码（包含数据库），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 基于python的个人博客系统的设计与实现代码（包含数据库），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 基于python的个人博客系统的设计与实现代码（包含数据库），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 基于python的个人博客系统的设计与实现代码（包含数据库），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设
某集团数字化信息管理平台解决方案.pdf
最新发布
08-17
某集团数字化信息管理平台解决方案.pdf
canvas实现半圆环形进度条
06-03
好的，我可以为您提供一些代码示例，您可以根据需要进行修改和调整。 HTML部分： ```html <canvas id="progress" width="200" height="200"></canvas> ``` CSS部分： ```css #progress { border-radius: 50%; }...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值