話(huà)不多說(shuō)，貼段代碼先！

canvas動(dòng)態(tài)畫(huà)圓函數(shù)

<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); // 開(kāi)始角度
  var endAngle = startAngle + 2 * Math.PI; // 結(jié)束角度
   var xAngle = 1 * (Math.PI / 180); // 偏移角度量
  var fontSize = 35; // 字號(hào)大小
  var tmpAngle = startAngle; //臨時(shí)角度變量
    function rander(i){
    if(tmpAngle >= endAngle){
      return;
    }else if(tmpAngle + xAngle > endAngle){
      tmpAngle = endAngle;
    }else{
      tmpAngle += xAngle;
    }
    ctx.clearRect(0, 0, mW, mH);
    //  畫(huà)圈
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = '#1c86d1';
    ctx.arc(r, r, cR, startAngle, tmpAngle);
    ctx.stroke();
    ctx.closePath();
    //  寫(xiě)字
    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動(dòng)態(tài)畫(huà)圓我寫(xiě)了一個(gè)多圖片h5頁(yè)面的loading...（只適用于圖片）
這里引入了別人的一個(gè)小插件 resLoader.js

<script  src="/public/libs/js/resLoader.js"></script>  // 這里引入了別人的一個(gè)小插件上面那個(gè)鏈接有這個(gè)插件的介紹
<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); // 開(kāi)始角度
    var endAngle = startAngle + 2 * Math.PI; // 結(jié)束角度
    var fontSize = 18; // 字號(hào)大小
    var tmpAngle = startAngle; // 臨時(shí)角度變量
    //  渲染函數(shù)
    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);
        //畫(huà)圈
        ctx.beginPath();
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = '#0587ff';
        ctx.arc(r, r, cR, startAngle, tmpAngle);
        ctx.stroke();
        ctx.closePath();
        //寫(xiě)字
        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) {
        //  函數(shù)為你傳入了current和total，分別表示當(dāng)前完成的資源個(gè)數(shù)和資源總個(gè)數(shù)，可用于計(jì)算進(jìn)度。
            var p = current / total*100
            rander(p);  // 在這調(diào)用渲染畫(huà)圓函數(shù)動(dòng)態(tài)畫(huà)圓
        },
        onComplete: function (total) {
           console.log('加載完畢:' + total + '個(gè)資源')
           // 加載完成之后渲染圖片
            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 {
     // 如果頁(yè)面不存在圖片直接移除canvas
      var load = document.getElementById('loading')；
       load.parentNode.removeChild(load)；
}
<script>

這里有我們生成的其中一個(gè)模板的效果圖大家有興趣可以看看， 查看更多模板請(qǐng)關(guān)注惠學(xué)寶公眾號(hào)查看。
http://api.hxbschool.com/public/page/5a0d32d0181bce2bb37d682c.html

歡迎指導(dǎo)點(diǎn)評(píng)