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

话不多说，贴段代码先！
canvas动态画圆函数

【前端学习之路——canvas动态画圆写加载中】利用canvas动态画圆我写了一个多图片h5页面的loading...（只适用于图片）
这里引入了别人的一个小插件 resLoader.js

// 这里引入了别人的一个小插件上面那个链接有这个插件的介绍 var imgs = document.getElementsByClassName('ele-img')； varimgArr = []; // 图片集合 varsrcArr = []; // 图片路径集合 for (var i = 0; i < imgs.length; i++){ var imgSrc = https://www.it610.com/article/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)； }

这里有我们生成的其中一个模板的效果图大家有兴趣可以看看，查看更多模板请关注惠学宝公众号查看。
http://api.hxbschool.com/public/page/5a0d32d0181bce2bb37d682c.html
欢迎指导点评