1.0.0 • Published 5 years ago

ring-progress v1.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

Circle-Progress

theapin

Circle-Progress是一款使用js编写的基于canvas的环形进度条插件,该插件简单小巧,高度可配置,不依赖任何第三方库。

使用示例代码

html代码

<canvas id="canvas" width="600px" height="600px"></canvas>

js代码

var ring = new Ring({
	canvasId:'canvas',
	x:100,
	y:100,
	r:60,
	strokeStyle:"rgb(255,84,6)",
	color:"rgb(46,47,255)",
	width:15,
	percent:68.8,
	animate:false,
	text:"进度条"
});

配置属性

属性默认值含义
canvas'canvas'canvas id值
x100圆心x坐标
y100圆心y坐标
r100圆环半径
width15圆环宽度
percent50进度条百分比
directionfalse绘制方式是否是顺时针
strokeBgStyle"#DDDDDD"背景环的背景色
strokeStyle"#01FF01"百分环的背景色
text""环形中显示的文字内容
color"#333"环形文字中的颜色
fontSize16文字大小
animatetrue是否动画加载环形