circle-progress-bar

利用canvas绘制圆环进度条的插件， 仓库地址👉 https://github.com/aswind7/circle-progress-bar/tree/master

介绍

circle-progress-bar.js 是一款利用canvas绘制圆环进度条的插件，不依赖任何库。

用法

基础用法

git clone 此仓库，然后在html中引用 lib文件夹中的index.js即可。

<style>
	#my-canvas {
		/*利用css控制canvas元素的宽高，解决canvas本身的失真问题*/
		width: 20px; 
	}
</style>
<canvas id="my-canvas" > 
</canvas>
<script src="./circle-progress-bar.js">
</script>
<script>
	var myCanvas = document.querySelector('#my-canvas');
	var c1 = new CircleProgressBar({
		canvasDom: myCanvas
	});
</script>

CommonJS用法

⚠️Tips: ----请注意: npm 包名是mini-circle-progress-bar 而非 circle-progress-bar!!

npm i mini-circle-progress-bar

ES Module:

import Bar from 'mini-circle-progress-bar'
var c1 = new Bar({
	canvasDom: myCanvas
});

CommonJS :

var Bar = require 'mini-circle-progress-bar'
var c1 = new Bar({
	canvasDom: myCanvas
});

参数配置

{
	canvasDom: CanvasDomNeedToSet, 		   // 必填的canvas dom 
	// 以下的数值为默认参数值
	r: 30,				           // 内圆半径
	lineWidth: 5, 				   // border宽度
	lineColor: '#3385ff', 		   	   // border进度条颜色
	lineBgColor: '#eeeeee',        		   // border背景颜色
	angle: Math.PI * 0.5,          		   // 需要转动的角度
	startAngle: -Math.PI * 0.5,    		   // 起始角度
	duration: 1000,				   // 过渡时间, 单位:ms
	text: '',    				   // 圆圈中的文字
	showPercent: true, 			   // 是否显示百分比数值
	textFontSize: 12, 			   // 文字大小 (px)
	textColor: '#3385ff', 		  	   // 文字颜色
	animationMode: 'linear'        		   // 'linear' || 'accelerate' || 'decelerate'  匀速，加速， 减速
}

兼容性

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	10+ ✔

FAQ

• 此插件运行方向均为顺时针，暂时不支持逆时针；

• 强烈不建议设置lineWitdh值为奇数！因为奇数线条宽度会在canvas中发虚（原因是剩余的0.5px宽度的线条颜色会变淡）

• 当showPercent为true时，同时又存在text: ‘示例文字’ ，则’示例文字’不会出现，只会出现百分比文字；

• 如何解决canvas失真的问题？
  失真问题是canvas本身就会存在的问题，利用css缩小canvas的宽高即可；
  如：设置参数：r: 50, lineWidth: 10, 则此时canvas的width会是 50*2+10*2 === 120, 此时css设置 #my-canvas {width: 60px;} 便缩小至了60px。

• 可以设置多行文字吗？
  不行，只能设置单行文字。

• 如何解决文字换行的问题？
  此插件不支持文字换行，文字过多时会造成canvas的显示不正常。
  解决方案： 设置参数showPercent: false, 然后用户自己编写文字元素并利用定位调整到圆环中心显示。

• 如何适配移动端？
  可以当页面加载完成时，先获取需要的画布的宽度，然后再渲染此进度条。