用Canvas画圆环百分比进度条

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>canvas圆环进度</title><link rel="stylesheet" href=""><style>*{padding: 0; margin: 0; }.circle{width: 200px;height: 200px;margin: 20em auto;position: relative;}canvas{display: block;margin: 0;position: absolute;background: white;left: 0;top: 0;}#canvas_1{z-index: 1 }#canvas_2{z-index: 2; background: transparent;transform:rotate(-90deg); }</style>
</head>
<body><div class="circle"><canvas id="canvas_1" width="200" height="200"></canvas><canvas id="canvas_2" width="200" height="200"></canvas></div><script>function inte(percent) {var canvas_1 = document.querySelector('#canvas_1');var canvas_2 = document.querySelector('#canvas_2');var ctx_1 = canvas_1.getContext('2d');var ctx_2 = canvas_2.getContext('2d');ctx_1.lineWidth = 10;ctx_1.strokeStyle = "#ccc";//画底部的灰色圆环ctx_1.beginPath();ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false);ctx_1.closePath();ctx_1.stroke();if (percent < 0 || percent > 100) {throw new Error('percent must be between 0 and 100');return}ctx_2.lineWidth = 10;ctx_2.strokeStyle = "#f90";var angle = 0;var timer;(function draw() {timer = requestAnimationFrame(draw);ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)//百分比圆环ctx_2.beginPath();ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false);angle++;var percentAge = parseInt((angle / 360) * 100)if (angle > (percent / 100 * 360)) {percentAge = percentwindow.cancelAnimationFrame(timer);};ctx_2.stroke();ctx_2.closePath();ctx_2.save();ctx_2.beginPath();ctx_2.rotate(90 * Math.PI / 180)ctx_2.font = '30px Arial';ctx_2.fillStyle = 'red';var text = percentAge + '%';ctx_2.fillText(text, 80, -90);ctx_2.closePath();ctx_2.restore();})()}window.onload = inte(60);</script>
</body>
</html>



效果图:试试吧~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247748.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用SQL计算两个地理坐标(经纬度)之间的地表距离

两个地理坐标(经纬度)地表距离计算公式&#xff1a; 公式解释如下&#xff1a; Long1,Lat1表示A点经纬度&#xff0c;Long2,Lat2表示B点经纬度&#xff1b;aLat1–Lat2 为两点纬度之差&#xff0c;bLong1-Long2为两点经度之差&#xff1b;6378.137为地球半径&#xff0c;单位为…

java数组 —(7)

* 1.数组的理解&#xff1a;数组(Array)&#xff0c;是多个相同类型数据一定顺序排列的集合&#xff0c;并使用一个名字命名&#xff0c; 并通过编号的方式对这些数据进行统一管理。 * 2.数组相关的概念&#xff1a; 数组名 元素 角标、下标、索引 数组的长度&#xff1a;元素…

java数组 —(8)

1.数组的创建与元素赋值&#xff1a; 杨辉三角&#xff08;二维数组&#xff09;、回形数&#xff08;二维数组&#xff09;、6个数&#xff0c;1-30之间随机生成且不重复。 2.针对于数值型的数组&#xff1a; 最大值、最小值、总和、平均数等 3.数组的赋值与复制 int[] a…

idea启动tomcat时报错:Error during artifact deployment. See server log for details.

Error during artifact deployment. See server log for details. 这个很多人都找不出来&#xff0c;原因无非2个&#xff1a; 一、jar 包有有些没能识别&#xff0c;tomcat没有配置好&#xff01; 二、这个一般代码错了&#xff1a; 除了看 server 的报错&#xff0c;别忘了看…

leetcode 279 四平方定理

可以用四平方和定理&#xff1a;任意一个正整数都可以表示为4个以内整数的平方和。 如果一个数含有因子4&#xff0c;那么我们可以把4都去掉&#xff0c;并不影响结果。比如&#xff1a;8去掉4&#xff0c;12去掉3&#xff0c;返回的结果都相同。 如果一个数除以8余7&#xff0…

java类与对象 —(10)

1.面向对象学习的三条主线&#xff1a; 1.Java类及类的成员&#xff1a;属性、方法、构造器&#xff1b;代码块、内部类2.面向对象的大特征&#xff1a;封装性、继承性、多态性、(抽象性)3.其它关键字&#xff1a;this、super、static、final、abstract、interface、package、…

JavaScript-内存空间

深入了解js这门语言后&#xff0c;才发现它有着诸多众所周知的难点&#xff08;例如&#xff1a;闭包、原型链、内存空间等&#xff09;。有的是因为js的设计缺陷导致的&#xff0c;而有的则是js的优点。不管如何&#xff0c;总需要去学会它们&#xff0c;在学习过程中我觉得只…

java类的结构1: 属性 —(11)

类的设计中&#xff0c;两个重要结构之一&#xff1a;属性 对比&#xff1a;属性 vs 局部变量 1.相同点&#xff1a; 1.1 定义变量的格式&#xff1a;数据类型 变量名 变量值1.2 先声明&#xff0c;后使用1.3 变量都其对应的作用域 2.不同点&#xff1a; 2.1 在类中声明的…

javascript-排序算法

插入排序 算法描述&#xff1a; 1. 从第一个元素开始&#xff0c;该元素可以认为已经被排序 2. 取出下一个元素&#xff0c;在已经排序的元素序列中从后向前扫描 3. 如果该元素&#xff08;已排序&#xff09;大于新元素&#xff0c;将该元素移到下一位置 4. 重复步骤 3&am…

DPDK并行计算

参考文献&#xff1a; 《深入浅出DPDK》 https://www.cnblogs.com/LubinLew/p/cpu_affinity.html ...................................................................... 前言&#xff1a; 处理器提高性能主要是通过两个途径&#xff0c;一个是提高IPC&#xff08;CPU每一时…

Highcharts图表-ajax-获取json数据生成图表

重点说明此代码是针对一个报表显示多个项对比显示。 直接贴代码&#xff1a;web端 <script type"text/JavaScript" src"js/jQuery/jquery-1.7.2.js"></script> <script type"text/javascript" src"j…

Java—List的用法与实例详解

List特点和常用方法 List是有序、可重复的容器。 有序指的是&#xff1a;List中每个元素都有索引标记。可以根据元素的索引标记&#xff08;在List中的位置&#xff09;访问元素&#xff0c;从而精确控制这些元素。 可重复指的是&#xff1a;List允许加入重复的元素。更确切地讲…

Java—遍历集合的N种方式总结Collections工具类

遍历集合的N种方式总结 【示例1】遍历List方法1&#xff0c;使用普通for循环 for(int i0;i<list.size();i){ //list为集合的对象名 String temp (String)list.get(i); System.out.println(temp); } 【示例2】遍历List方法2&#xff0c;使用增强for循环(使用泛型定义…

java类的结构2: 方法—(12)

面向对象的特征一&#xff1a;封装与隐藏 1.为什么要引入封装性&#xff1f; 我们程序设计追求“高内聚&#xff0c;低耦合”。 高内聚 &#xff1a;类的内部数据操作细节自己完成&#xff0c;不允许外部干涉&#xff1b; 低耦合 &#xff1a;仅对外暴露少量的方法用于使用。…

List接口常用实现类的特点和底层实现

List接口常用的实现类有3个&#xff1a;ArrayList、LinkedList、Vector。 那么它们的特点和底层实现有哪些呢&#xff1f; ArrayList特点和底层实现 ArrayList底层是用数组实现的存储。 特点&#xff1a;查询效率高&#xff0c;增删效率低&#xff0c;线程不安全。我们一般使用…

java面向对象的特征 —(13)

面向对象的特征一&#xff1a;封装与隐藏 1.为什么要引入封装性&#xff1f; 我们程序设计追求“高内聚&#xff0c;低耦合”。 高内聚 &#xff1a;类的内部数据操作细节自己完成&#xff0c;不允许外部干涉&#xff1b; 低耦合 &#xff1a;仅对外暴露少量的方法用于使用。…

jquery Ajax请求本地json

1-1-1 json文件内容(item.json) [{"name":"张国立","sex":"男","email":"zhangguoli123.com","url":"./img/1.jpg"},{"name":"张铁林","sex":"男"…

论文《learning to link with wikipedia》

learning to link with wikipedia 一、本文目标&#xff1a; 如何自动识别非结构化文本中提到的主题&#xff0c;并将其链接到适当的Wikipedia文章中进行解释。 二、主要借鉴论文&#xff1a; Mihalcea and Csomai----Wikify!: linking documents to encyclopedic knowledge 第…

java面向对象的特征二:继承性 —(14)

1.为什么要有类的继承性&#xff1f;(继承性的好处&#xff09; ① 减少了代码的冗余&#xff0c;提高了代码的复用性② 便于功能的扩展③ 为之后多态性的使用&#xff0c;提供了前提 图示&#xff1a; 2.继承性的格式&#xff1a; class A extends B{} A:子类、派生类、s…

java面向对象的特征三:多态性 —(15)

1.多态性的理解&#xff1a;可以理解为一个事物的多种形态。 2.何为多态性&#xff1a; 对象的多态性&#xff1a;父类的引用指向子类的对象&#xff08;或子类的对象赋给父类的引用&#xff09; 举例&#xff1a; Person p new Man(); Object obj new Date(); 3.多态性的…