首先看一点点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);
运行效果：
运行效果
