canvas圆形进度条

Html

Css

#creditData {
	width:19rem;
	height:19rem;
	background-color:#fff;
	margin:0 auto;
	position:relative;
}
#cvs {
	width:100%;
	height:100%;
	background-color:#fff;
}
#creditContent {
	text-align:center;
	height:7.4rem;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
	overflow:hidden;
}
#creditContent>h1 {
	color:#ffd100;
	font-size:80px;
	margin:0;
	line-height:80px;
}

var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');

CanvasRenderingContext2D.prototype.sector = function(x, y, r, angle1, angle2) {
    this.save();
    this.beginPath();
    this.moveTo(x, y);
    this.arc(x, y, r, angle1 * Math.PI / 180, angle2 * Math.PI / 180, false);
    this.closePath();
    this.restore();
    return this;
}

function arcFun(x, y, deg, colorStr) {
    ctx.save();
    ctx.beginPath();
    ctx.translate(cvs.width / 2, cvs.height / 2); //将画布坐标系原点移至中心
    ctx.rotate(deg * Math.PI / 180);
    ctx.translate(-cvs.width / 2, -cvs.height / 2); //修正画布坐标系
    ctx.fillStyle = colorStr;
    ctx.arc(12, 190, 12, 2 * Math.PI / 180, false);
    ctx.fill();
}

ctx.fillStyle = '#e9e9e9';
ctx.sector(190, 190, 190, 135, 405).fill(); //绘制进度条槽

//根据三角函数算出进度槽的起点和终点的圆心坐标
var arc_a = Math.pow(178, 2);
var arc_y = Math.sqrt(arc_a / 2); //
var arc_x = 178 - arc_y;

//进度槽的起点圆点
ctx.beginPath();
ctx.arc(12 + arc_x, 190 + arc_y, 12, 2 * Math.PI / 180, false);
ctx.fillStyle = '#e9e9e9';
ctx.fill();
//进度槽的终点圆点
ctx.beginPath();
ctx.arc(190 + arc_y, 190 + arc_y, 12, 2 * Math.PI / 180, false);
ctx.fillStyle = '#e9e9e9';
ctx.fill();

var creditVal = parseFloat($('#creditContent h1').text()); //获取信誉值
var deg = 270 / 100 * creditVal; //根据信誉值得到进度条的旋转度数

//有信誉值得时候
if (deg > 0) {
    ctx.fillStyle = '#ffd100';
    ctx.sector(190, 190, 190, 135, 135 + deg).fill(); //绘制进度条

arcFun(12, 190, -45, '#ffd100'); //进度条开始的圆点
    arcFun(12, 190, deg, '#ffd100'); //进度条结束的圆点
}

////绘制中心圆
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(cvs.width / 2, cvs.width / 2, 166, 2 * Math.PI / 180, false);
ctx.fill();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas圆形进度条



代码描述：html5 纯canvas圆形扇形进度条

canvas开发圆形/扇形进度条。扇形315度。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

lhy308720327

相关代码

50

canvas圆形进度条

最新