前端学习之路——canvas动态画圆写加载中

话不多说，贴段代码先！

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

欢迎指导点评