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;

第一种:圆饼百分比

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){
			clearInterval(timer);
		}else{
			draw(t);
			t+=0.005;
		}
	},5);
}
loadCanvas(0.8);
timer=null;

演示地址

第二种:圆环百分比

canvas-2.gif

代码如下:

此处内容需要登录才可见
canvas绘制旋转的圆环百分比进度条

发现canvas可以做很多东西,不止是圆形、圆环、矩形,各种你想得到的图形都能做到。

后面将考虑一下如何使用矩形和三角形做出百分比进度条。这是一个很有意思的玩意。

原文链接:canvas绘制旋转的圆环百分比进度条 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/canvas-circular.html)

发表评论

请登录后发表评论:

3 Responses to “canvas绘制旋转的圆环百分比进度条”

  1. 谁抢了我的大腹肌

    当值为1的时候,这个环没有完全闭合

    登录回复
  2. 一毛童鞋

    都打开不了

    登录回复
  3. 云库网

    这个分享好,学习东西了!云库网http://yunkus.com - 前端必到的地方

    登录回复