话不多说，贴段代码先！
canvas动态画圆函数
<script type="text/javascript">
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var mW = c.width = 300;
var mH = c.height = 300;
var lineWidth = 5;
var r = mW / 2; // 中间位置
var cR = r - 4 * lineWidth; // 圆半径
var startAngle = -(1 / 2 * Math.PI); // 开始角度
var endAngle = startAngle + 2 * Math.PI; // 结束角度
var xAngle = 1 * (Math.PI / 180); // 偏移角度量
var fontSize = 35; // 字号大小
var tmpAngle = startAngle; //临时角度变量
function rander(i){
if(tmpAngle >= endAngle){
return;
}else if(tmpAngle + xAngle > endAngle){
tmpAngle = endAngle;
}else{
tmpAngle += xAngle;
}
ctx.clearRect(0, 0, mW, mH);
// 画圈
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#1c86d1';
ctx.arc(r, r, cR, startAngle, tmpAngle);
ctx.stroke();
ctx.closePath();
// 写字
ctx.fillStyle = '#1d89d5';
ctx.font= fontSize + 'px Microsoft Yahei';
ctx.textAlign='center';
ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);
requestAnimationFrame(rander);
};
rander();
</script>
利用canvas动态画圆我写了一个多图片h5页面的loading...（只适用于图片）
这里引入了别人的一个小插件 resLoader.js
<script src="/public/libs/js/resLoader.js"></script> // 这里引入了别人的一个小插件上面那个链接有这个插件的介绍
<script>
var imgs = document.getElementsByClassName('ele-img')；
var imgArr = []; // 图片集合
var srcArr = []; // 图片路径集合
for (var i = 0; i < imgs.length; i++){
var imgSrc = imgs[i].getAttribute('preSrc')
if (imgSrc) {
srcArr.push(imgSrc)；
imgArr.push(imgs[i])；
}
}
if (imgs.length > 0){
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var mW = c.width = 120;
var mH = c.height = 120;
c.setAttribute('width', mW * 2);
c.setAttribute('height', mH * 2);
c.style.width = mW + 'px';
c.style.height = mH + 'px';
var lineWidth = 5;
var r = mW / 2; // 中间位置
var cR = r - 2 * lineWidth; // 圆半径
var startAngle = -(1 / 2 * Math.PI); // 开始角度
var endAngle = startAngle + 2 * Math.PI; // 结束角度
var fontSize = 18; // 字号大小
var tmpAngle = startAngle; // 临时角度变量
// 渲染函数
function rander(deg){
var xAngle = parseInt(deg) * (Math.PI / 180);// 偏移角度量
if(tmpAngle >= endAngle){
return;
}else if(tmpAngle + xAngle > endAngle){
tmpAngle = endAngle;
}else{
tmpAngle += xAngle;
}
ctx.clearRect(0, 0, mW, mH);
//画圈
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#0587ff';
ctx.arc(r, r, cR, startAngle, tmpAngle);
ctx.stroke();
ctx.closePath();
//写字
ctx.fillStyle = '#1d89d5';
ctx.font= fontSize + 'px Microsoft Yahei';
ctx.textAlign='center';
ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);
};
var loader = new resLoader({
resources: srcArr , // 所有图片路径的集合
onStart: function (total) {
console.log('start:' + total)
},
onProgress: function (current, total) {
// 函数为你传入了current和total，分别表示当前完成的资源个数和资源总个数，可用于计算进度。
var p = current / total*100
rander(p); // 在这调用渲染画圆函数动态画圆
},
onComplete: function (total) {
console.log('加载完毕:' + total + '个资源')
// 加载完成之后渲染图片
for (var k = 0; k < imgArr.length; k++) {
if (imgArr[k]) {
imgArr[k].setAttribute('src', srcArr[k]);
} else {
continue;
}
}
// 加载完成之后移除canvas
var load = document.getElementById('loading')；
load.parentNode.removeChild(load)；
}
});
loader.start();
} else {
// 如果页面不存在图片直接移除canvas
var load = document.getElementById('loading')；
load.parentNode.removeChild(load)；
}
<script>
这里有我们生成的其中一个模板的效果图大家有兴趣可以看看， 查看更多模板请关注惠学宝公众号查看。
http://api.hxbschool.com/public/page/5a0d32d0181bce2bb37d682c.html
欢迎指导点评
