用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>

效果图：试试吧~~

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

java如何画百分比圆环_canvas绘制旋转的圆环百分比进度条
作者:依然 | 时间:2015-05-29 | 阅读:122 canvas绘制旋转的圆环百分比进度条从上一篇的文章使用HTML5 Canvas arc()绘制圆形/圆环我们了解到了怎么使用ca ...
Vue实战--动态圆环百分比进度条
最近在开发小程序的时候,碰到一个实现圆环百分比进度条的需求,类似如下设计图: 小白的我感觉实现起来有难度,于是上百度看看别人是怎么做的,结果没找到一个满意的,要不是静态的实现,就是需要用到比较多的 ...
微信小程序canvas 画动态圆环百分比进度条实例根据手机屏幕宽度自适应放大缩小
这里是wxml代码: <component-analysis-report active="0" bindselectReport="selectReport&qu ...
canvas画弧形渐变进度条
需求:在swiper轮播图中做出如图的弧形进度条,轮播的会员等级分别为白银.黄金.铂金.钻石: 以下代码会先展示一个弧形图的代码,之后会展示轮播图中的弧形进度条代码单个弧形图: 代码 <vie ...
vue 圆形百分比进度条_vue实用组件——圆环百分比进度条
有需要的人可以参考一下,如果试用过,发现问题,欢迎留言告知,不胜感激. 功能介绍: 1.若页面无刷新,且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画 2.若页面无刷新,且第一次传值大于第二 ...
YCProgress自定义百分比进度条
目录介绍 1.本库优势亮点 2.使用介绍 2.1 圆环百分比进度条 2.2 直线百分比进度条 2.3 仿杀毒类型百分比进度条 3.注意要点 4.效果展示 5.其他介绍 1.本库优势亮点圆环百分比进度 ...
android 画圆弧动画,『Android自定义View实战』自定义带入场动画的弧形百分比进度条...
写在前面这是在简书发表的处女座,这个想法也停留在脑海中很久了,一直拖到现在(懒癌发作2333),先自我介绍一番,一枚刚毕业不久的Android程序猿,初出茅庐的Android小生,之前一直在CSDN ...
uni-app中自定义图表（canvas实现chart图表）开发篇（1）-圆环带进度条
经常开发中,会遇到各种各样图表,这时大家普遍会想到去找插件.uniapp中常用的有uchart.js和echart.js,这对图表要求不高的项目来说,是很便捷的.但有时会遇到一些定制图表,加上UI的美 ...
android自定义进度条百分比跟着走,Android自定义View实现水平带数字百分比进度条...
这个进度条可以反映真实进度,并且完成百分比的文字时随着进度增加而移动的,所在位置也恰好是真实完成的百分比位置,效果如下: 思路如下:第一部分是左侧的蓝色直线,代表已经完成的进度:第二部分是右侧灰色的直 ...

用Canvas画圆环百分比进度条

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

最新文章

热门文章