五角星進度 · 前端技術總結

看示例之前，先看一下簡單五角星的繪制。 ![](https://box.kancloud.cn/860849937b683ca42f32e56c772b48e7_400x387.jpg) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星進度</title> </head> <body> <canvas id="cvs"></canvas> <script> var cvs = document.getElementById('cvs'); cvs.width = 500; cvs.height = 500; cvs.style.backgroundColor = '#eee'; var ctx = cvs.getContext('2d'); ctx.beginPath(); ctx.moveTo(76,197); ctx.lineTo(421,197); ctx.lineTo(143,399); ctx.lineTo(248,71); ctx.lineTo(356,399); ctx.lineTo(76,197); ctx.closePath(); ctx.lineWidth = 8; ctx.stroke(); ctx.fillStyle = '#ccc'; ctx.fill(); </script> </body> </html> ~~~ 注意：先stroke后fill才能把五角星里面的連接覆蓋掉。下面看下示例效果 ![](https://box.kancloud.cn/9a6f47175654988cdf62606115bbe392_388x364.gif) 代碼 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星進度</title> </head> <body> <canvas id="cvs"></canvas> <script> var cvs = document.getElementById('cvs'); cvs.width = 500; cvs.height = 500; cvs.style.backgroundColor = '#eee'; var ctx = cvs.getContext('2d'); // 數據 var initPoint = [76, 197]; // 初始點 var pointsArr = [ // 連接點 [421, 197], [143, 399], [248, 71], [356, 399], [76, 197], ]; var pointsSize = pointsArr.length; // 連接點數量 var segmentPercent = Math.round(100/pointsSize); // 每個點占的百分比 var percent = 0; function progressStar() { if(percent <= 100) { var wholeSegmentIndex = Math.floor(percent/100*pointsSize); // 當前百分比能用的索引 var restPercent = percent%segmentPercent; // 取余百分比 var restPartPercent = restPercent/segmentPercent; // 取余百分比點每個點占的百分比的百分比 var progressPointsArr = []; // 存乘余百分比的點 if(restPercent !== 0) { if(wholeSegmentIndex === 0) { progressPointsArr[0] = initPoint; progressPointsArr[1] = [ initPoint[0]+(pointsArr[0][0]-initPoint[0])*restPartPercent, initPoint[1]+(pointsArr[0][1]-initPoint[1])*restPartPercent ]; } else { progressPointsArr[0] = pointsArr[wholeSegmentIndex-1]; progressPointsArr[1] = [ pointsArr[wholeSegmentIndex-1][0]+(pointsArr[wholeSegmentIndex][0]-pointsArr[wholeSegmentIndex-1][0])*restPartPercent, pointsArr[wholeSegmentIndex-1][1]+(pointsArr[wholeSegmentIndex][1]-pointsArr[wholeSegmentIndex-1][1])*restPartPercent ]; } } // 清空 ctx.clearRect(0, 0, 500, 500); // 原圖 ctx.save(); ctx.beginPath(); ctx.moveTo(initPoint[0], initPoint[1]); pointsArr.forEach(function(v) { ctx.lineTo(v[0], v[1]); }); ctx.closePath(); ctx.lineWidth = 8; ctx.stroke(); ctx.fillStyle = '#ccc'; ctx.fill(); ctx.restore(); // 進度圖 ctx.save(); ctx.beginPath(); ctx.moveTo(initPoint[0], initPoint[1]); pointsArr.slice(0, wholeSegmentIndex).forEach(function(v) { ctx.lineTo(v[0], v[1]); }); // 是否關閉路徑 if(percent === 100) { ctx.closePath(); } // 接點繪制 if(progressPointsArr.length > 0) { ctx.moveTo(progressPointsArr[0][0], progressPointsArr[0][1]); ctx.lineTo(progressPointsArr[1][0], progressPointsArr[1][1]); } ctx.lineWidth = 8; ctx.strokeStyle = '#690'; ctx.stroke(); // 是否填充 if(percent === 100){ ctx.fillStyle = '#ccc'; ctx.fill(); } ctx.restore(); window.requestAnimationFrame(progressStar); } percent++; } progressStar(); </script> </body> </html> ~~~ 主要的難點就是生成兩坐標點之間的百分比坐標點算法如下 ~~~ var p1 = [ 2, 2 ], p2 = [ 10, 10 ]; var percent = 0.6; var point = [ p1[0] + (p2[0] - p1[0]) * percent, p1[1] + (p2[1] - p1[1]) * percent ]; ~~~ 詳情請參數，算法一節里的幾何算法。。 ![](https://box.kancloud.cn/8b7ad6384c709ab48d5d500bf0222c41_226x177.jpg) > see you next time.