canvas圆形加载进度动画实例

首先看一点点canvas的基础知识

怎样让canvas居中？

canvas不能把width和height写在css中，最好是写成行间样式，那怎么把它居中呢？

<div class="justify-content-md-center">
   <canvas id="can" height="500px" width="500px"></canvas>
</div>

css

.justify-content-sm-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

canvas是基于状态绘制的

加载百分比显示

<div class="text-center"><button id="box11" type="button" class="btn btn-primary">加载</button></div>

引用了bootstrap作为css

思路：

首先，画一个扇形，需要确定圆心点，半径、角度、落笔的起始角度、终止角度，
然后，画圆弧，最后让曲线封闭。
我是使用CanvasRenderingContext2D对象，在它的prototype上定义一个方法。
写一个函数，设定几个形参，它们是：圆心点的x坐标，y坐标，半径r,起始角度sDeg,终止角度eDeg，
好了，废话不说，直接上代码
js code

var can = document.getElementById('can'),
    box11 = document.getElementById('box11');
var ctx = can.getContext('2d'),timer,angle = 0, per;

CanvasRenderingContext2D.prototype.sector = function(x,y,r,sDeg,eDeg){
  
this.save();//1、用来保存当前画布的状态
this.beginPath();//2.开始绘制
this.moveTo(x,y);//把画笔移动到开始位置
//角度转弧度的公式Math.PI/180
this.arc(x,y,r,sDeg*Math.PI/180,eDeg*Math.PI/180,false);//创建了圆弧
this.closePath();//结束绘制
this.restore();//保存最近的状态
return this;
}
ctx.fillStyle = "#f3726d";//填充颜色
timer = setInterval(function(){
angle +=5;
ctx.sector(250,250,100,0,angle).fill();
per = (5 * angle/18).toFixed(2);
box11.innerHTML= '加载了' + per + '%' ;
if (angle == 360) {
  clearInterval(timer);
  box11.innerHTML = "加载完成";
}
},200);

运行效果：

运行效果