canvas绘制旋转的圆环百分比进度条

上一篇的文章我们了解到了怎么使用canvas绘制一个圆。其实圆环相比就是它的边框加粗了而已,我们需要使用 stroke() 或 fill() 方法在画布上绘制实际的弧。而lineWidth则等于你需要的圆环大小即可。

设置圆环的颜色和大小

ctx.beginPath();
ctx.strokeStyle = '#99CC33';
ctx.lineCap = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10.0;

设置圆环百分比进度

使用HTML5 Canvas arc()绘制圆形/圆环 从上面这个图,我们可以看出canvas的开始角并不在我们印象中圆的顶点位置,所以我们要设置开始角的位置在1.5*Math.PI开始,可以是顺时针,也可以是反时针方向。考虑到现在市面上的圆环进度条都是以顺时针开始。
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
从上面的的一个函数,我们要画圆,只需要sAngle为1.5*Math.PI.而结束角度则是我们要根据百分比来算的。把百分比分成4个部分,0-25%则在1.5*PI到0.25%到50%则在0-0.5*PI,50%-75%则在0.5*PI到1*PI。75%-100%则在1*PI到1.5*PI。 设置要转到的角度为变量current. 得到结束角为 eAngle = current*(2*PI) - PI/2; 默认HTML代码为:
<canvas id="bg" width="200" height="200"></canvas>

第一种:圆饼百分比

canvas-1 代码如下:
var bg = document.getElementById('bg');
var cxt = bg.getContext('2d'); //创建context对象
cxt.fillStyle = '#FF0000'; //设置或返回用于填充绘画的颜色、渐变或模式 染成红色
cxt.strokeStyle="#ff0000"; //设置或返回用于笔触的颜色、渐变或模式
//cxt.lineCap = 'square'; //设置或返回线条的结束端点样式
cxt.beginPath(); //起始一条路径,或重置当前路径
cxt.moveTo(100,100); //把路径移动到画布中的指定点,不创建线条

function draw(current){

//cxt.lineTo(100,0); //添加一个新点,然后在画布中创建从该点到最后指定点的线条
cxt.arc(100,100,80,-0.5*Math.PI,current*(2*Math.PI) - Math.PI/2,false); //绘制一个中心点为(100,100),半径为100,起始点为1.5*Math.PI,终点为2*Math.PI,顺时针的1/4圆
cxt.closePath(); //创建从当前点回到起始点的路径
cxt.fill();//填充当前绘图(路径)
//cxt.lineWidth = 10.0; //设置或返回当前的线条宽度
cxt.stroke(); //绘制已定义的路径
}
//draw(0.6);
var t=0;
var timer=null;
function loadCanvas(now){
	timer = setInterval(function(){
		if(t>now){
                        draw(now);//最后一次绘制
			clearInterval(timer);
		}else{
			draw(t);
			t+=0.005;
		}
	},5);
}
loadCanvas(0.8);
timer=null;
演示地址

第二种:圆环百分比

canvas-2.gif 代码如下:
var bg = document.getElementById('bg');
var ctx = bg.getContext('2d');
var circ = Math.PI * 2;
var quart = Math.PI / 2;
var imd = null;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

ctx.beginPath();
ctx.strokeStyle = '#99CC33';
ctx.lineCap = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10.0;

imd = ctx.getImageData(0, 0, 240, 240);
function draw(current){
	ctx.putImageData(imd, 0, 0);
	ctx.beginPath();
	ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false);
	ctx.stroke();
}
//draw(0.6);
var t=0;
var timer=null;
function loadCanvas(now){
	timer = setInterval(function(){
		if(t>now){
                        draw(now);//最后一次绘制
			clearInterval(timer);
		}else{
			draw(t);
			t+=0.01;
		}
	},20);
}
loadCanvas(0.8);
timer=null;
演示地址 发现canvas可以做很多东西,不止是圆形、圆环、矩形,各种你想得到的图形都能做到。 后面将考虑一下如何使用矩形和三角形做出百分比进度条。这是一个很有意思的玩意。