井井客

搜索

自己练习Canvas画圆环东抄西抄效果还好

最近在看移动端H5,练习画的一个canvas圆环进度条,主体代码是从网上东找西找的,整理之后封装成了一个函数,可多次调用。

自己练习Canvas画圆环东抄西抄效果还好

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试圆环</title>
</head>
<body>
<canvas id="Canvas01" width="400px" height="400px">在此写百分比,不影响函数</canvas>
<canvas id="Canvas02" width="300px" height="300px">在此写百分比,不影响函数</canvas>
<canvas id="Canvas03" width="200px" height="200px">在此写百分比,不影响函数</canvas>
<script>
drawRound('Canvas01','#fc0','#eee','61.5%','bold 90px Arial',200);
drawRound('Canvas02','#fc0','#eee','55.1%','bold 70px Arial',150);
drawRound('Canvas03','#fc0','#eee','96.6%','bold 50px Arial',100);
//第一个参数是Id(选择器)
//第二个参数是需要显示的进度颜色
//第三个参数是圆环背景色
//第四个参数是进度值(按百分比来传到时候会显示在正中间)
//第五个参数是中间的字体设置
//第六个参数是圆环的半径(从中间点到最大的外径的距离)

function drawRound(id,col,bgcol,val,thisFont,rad){
	var ele = document.getElementById(id),
		ctx = ele.getContext('2d'),
		data = [{bgcolor:col,value:parseFloat(val)},
				{bgcolor:bgcol,value:(100-parseFloat(val))}],
		cood={x:rad,y:rad},
		radius=rad,
		lastpos=pos=0;
	for(var i = 0; i < data.length; i++){
		ctx.beginPath();
		ctx.moveTo(cood.x,cood.y);
		ctx.fillStyle = data[i].bgcolor;
		pos=lastpos+Math.PI*2*data[i].value/100;
		ctx.arc(cood.x,cood.y,radius,lastpos,pos,false);
		ctx.fill();
		lastpos=pos;
	}
	//画中心白色的圆
	ctx.beginPath();
	ctx.fillStyle ="white";
	radius*=0.8;
	ctx.arc(cood.x,cood.y,radius,0,Math.PI*2 ,false);
	ctx.fill();
	//画中心灰色的背景
	ctx.beginPath();
	ctx.arc(rad,rad,rad*0.75,0,2*Math.PI);
	ctx.closePath();
	ctx.strokeStyle = bgcol;
	ctx.stroke();
	//画中间的文字
	ctx.font = thisFont;
	ctx.fillStyle = col;
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	ctx.fillText(val,rad,rad);
}
</script>
</body>
</html>

自己练习做了一遍,本来尝试想将圆环逆时针转90角,没成功,有时间会再去尝试的。。

PS:实际上在ctx.arc最后一个参数改为true就可以做逆时针了~之前思路想叉了

文章TAG:html5,canvas

作者:井井客整理来源:互联网
本文标题:自己练习Canvas画圆环东抄西抄效果还好
本文链接:http://www.jingjingke.com/c/21128.html

上一篇:chrome12个很有用的浏览器命令
下一篇:koala图形化界面编译less/sass

文章分类

相关阅读

随便看看