canvas圆形进度条

时间  2019-12-06 标签 canvas 圆形 进度

canvas中没有直接绘制圆的方法，但有一个绘制弧线的context.arc方法， 
下面讲下用该方法如何绘制出图片效果。html

processbar

arc()方法介绍

context.arc(x,y,r,sAngle,eAngle,counterclockwise);jquery

参数说明：canvas

  • x: 圆的中心的 x 坐标
  • y: 圆的中心的 y 坐标
  • r: 圆的半径
  • sAngle: 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）
  • eAngle: 结束角，以弧度计
  • counterclockwise: 可选。规定应该逆时针仍是顺时针绘图。False = 顺时针，true = 逆时针。默认false

看到这里，你们就会明白怎么画圆了把，只要让起始角和结束角度为一个圆周就能够了。ui

下面开始画图咯！this

环形进度条

环形进度条主要两部分组成，一是灰色圆，另外一是蓝色弧度。也就是说灰色圆圈和蓝色弧同圆心同半径。知道了原理你们是否是以为瞬间简单好多。。。.net

第一步：画灰色圆

 

  1. function Circle() {prototype

  2. this.radius = 100; // 圆环半径code

  3. this.lineWidth = 25; // 圆环边的宽度xml

  4. this.strokeStyle = '#ccc'; //边的颜色htm

  5. this.fillStyle = 'blue'; //填充色

  6. this.lineCap = 'round';

  7. }

  8.  

  9. Circle.prototype.draw = function(ctx) {

  10. ctx.beginPath();

  11. ctx.arc(250, 250, this.radius, 0, Math.PI*2, true); // 坐标为250的圆，这里起始角度是0，结束角度是Math.PI*2

  12. ctx.lineWidth = this.lineWidth;

  13. ctx.strokeStyle = this.strokeStyle;

  14. ctx.stroke(); // 这里用stroke画一个空心圆，想填充颜色的童鞋能够用fill方法

  15. };

  •  

固然这样是画不出来的，咱们继续往下看。

第二步：画进度条（蓝色部分）

这部分说白了就是和灰色圆圈同圆心同半径的一条蓝弧。

 

  1. function Ring(startAngle, percent) {

  2. Circle.call(this);

  3. this.startAngle = startAngle || 3*Math.PI/2; //弧起始角度

  4. this.percent = percent; //弧占的比例

  5. }

  6.  

  7. Ring.prototype = Object.create(Circle.prototype);

  8.  

  9. Ring.prototype.drawRing = function(ctx) {

  10. this.draw(ctx); // 调用Circle的draw方法画圈圈

  11.  

  12. // angle

  13. ctx.beginPath();

  14. var anglePerSec = 2 * Math.PI / (100 / this.percent); // 蓝色的弧度

  15. ctx.arc(250, 250, this.radius, this.startAngle, this.startAngle + , false); //这里的圆心坐标要和cirle的保持一致

  16. ctx.strokeStyle = that.fillStyle;

  17. ctx.lineCap = that.lineCap;

  18. ctx.stroke();

  19. ctx.closePath();

  20. }

  • 1
  •  

canvas是否是还没定义呐？别急，咱慢慢来～

<canvas id="canvas" width="400" height="400"></canvas>
  • 1
  • 1

获取canvas的上下文context：

 

  1. var canvas = document.getElementById('canvas');

  2. var ctx = canvas.getContext('2d');

  • 1
  • 2
  • 1
  • 2

接下来就调用下咱们的drawRing吧

 

  1. var ring = new Ring(2*Math.PI/3, 50); // 从2*Math.PI/3弧度开始，进度为50%的环

  2. ring.drawRing(ctx);

  • 1
  • 2
  • 1
  • 2

到这里，一个上图所示的进度环就ok了～ 
先别鼓掌太早，既然是进度条，是否是要动起来的更美呢！

动以前，咱们先搞明白一个概念，咱们知道，坐标分为四个象限，若是圆心是原点，那么arc方法的弧度是怎么开始的呢？先看图！ 
arc（偶从w3school挖的图）

怎么样，明白了吗？是否是以为哪里不对劲呢～上学时学的第一象限0～π/2(右上角)，怎么看起来是反的呢，这就是差别啊！！细心的童鞋可能会注意到arc方法不是还有最后一个参数嘛，仍是可选的，当counterclockwise参数为true时，大家猜这逆天的坐标轴会变成咱们熟悉的吗？哎～摸摸头。。。人家这参数只是让弧度逆时针转了而已，坐标轴弧度仍是不变滴～

好了，说了这么多，是否是该动起来了呢，直接上代码。

 

  1. Ring.prototype.drawRing = function(ctx) {

  2. var count = 0,

  3. that = this,

  4. times = 10, // 分十次绘制蓝弧

  5. startAngle = this.startAngle,

  6. endAngle = startAngle;

  7.  

  8. // draw background cirle

  9. this.draw(ctx);

  10.  

  11. var handle = setInterval(function() {

  12. if (count == times) {

  13. clearInterval(handle);

  14. }

  15.  

  16. // angle

  17. ctx.beginPath();

  18. var anglePerSec = 2 * Math.PI * (that.percent / 100) / times; // 每一个间隔滑动的弧度

  19. ctx.arc(250, 250, that.radius, startAngle, endAngle, false); //这里的圆心坐标要和cirle的保持一致

  20. ctx.strokeStyle = that.fillStyle;

  21. ctx.lineCap = that.lineCap;

  22. ctx.stroke();

  23. ctx.closePath();

  24.  

  25. startAngle += anglePerSec - 0.0028; // 消除每次绘环间的计算偏差，防止出现空隙

  26. endAngle = startAngle + anglePerSec;

  27.  

  28. count++;

  29. }, 60); // 这里定义每60ms绘制一次

  30. }

  •  

是的，只要把Ring.prototype.drawRing方法替换为上面的就行。 

小伙伴们本身动手画个吧～

转载：http://blog.csdn.net/chuan2009he/article/details/45065299

 

 

 

<!DOCTYPE html> 

<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Canvas绘图</title>

<script src=" http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

</head>

<body>

<canvas class="process" width="48px" height="48px">0%</canvas>  

</body>

<script>

$(document).ready(function() {

//drawProcess();

i = 0;

var t = setInterval("addNum()",20);

});

function addNum() {

if(i<100){

i++;

$('canvas.process').text(i+"%");

drawProcess();

}else{

clearInterval(t);

}

}

 

function drawProcess() {  

    $('canvas.process').each(function() {

        var text = $(this).text();

        var process = text.substring(0, text.length-1);   

        var canvas = this;  

        var context = canvas.getContext('2d');  

        context.clearRect(0, 0, 48, 48);  

        context.beginPath();  

        context.moveTo(24, 24);  

        context.arc(24, 24, 24, 0, Math.PI * 2, false);  

        context.closePath();  

        context.fillStyle = '#ddd';  

        context.fill();  

        context.beginPath();  

        context.moveTo(24, 24);    

        context.arc(24, 24, 24, 0, Math.PI * 2 * process / 100, false);  

        context.closePath();  

        context.fillStyle = '#2a2';  

        context.fill();   

        context.beginPath();  

        context.moveTo(24, 24);  

        context.arc(24, 24, 21, 0, Math.PI * 2, true);  

        context.closePath();  

        context.fillStyle = 'rgba(255,255,255,1)';  

        context.fill();  

        context.beginPath();  

        context.arc(24, 24, 18.5, 0, Math.PI * 2, true);  

        context.closePath();  

        context.strokeStyle = '#ddd';  

        context.stroke();  

        context.font = "bold 9pt Arial";  

        context.fillStyle = '#2a2';  

        context.textAlign = 'center';  

        context.textBaseline = 'middle';  

        context.moveTo(24, 24);  

        context.fillText(text, 24, 24);  

    });

}

</script>

</html>

联系我们 沪ICP备13005482号-10