橢圓及橢圓進度 · 前端技術總結

本示例的橢圓畫法是利用acr方法加上scale和translate來實現的效果 ![](https://box.kancloud.cn/e86aaf1a8cc85e5a8a126cea3fae09e5_176x172.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'); drawEllipse(ctx, 100, 100, 60, 30); /* ctx上下文環境 cx圓心x坐標 cy圓心y坐標 xRadius橫軸半徑 yRadius縱軸半徑 */ function drawEllipse(ctx, cx, cy, xRadius, yRadius) { // 參考圓 ctx.save(); var radius = (xRadius > yRadius) ? xRadius : yRadius; var ratioX = xRadius / radius; var ratioY = yRadius / radius; ctx.beginPath(); ctx.arc(cx, cy, radius, 0, 2*Math.PI, false); ctx.closePath(); ctx.fillStyle = '#999'; ctx.fill(); ctx.restore(); // 填充橢圓 ctx.save(); var radius = (xRadius > yRadius) ? xRadius : yRadius; var ratioX = xRadius / radius; var ratioY = yRadius / radius; ctx.translate(cx, cy); ctx.scale(ratioX, ratioY); ctx.translate(-cx, -cy); ctx.beginPath(); ctx.arc(cx, cy, radius, 0, 2*Math.PI, false); ctx.closePath(); ctx.fillStyle = '#eee'; ctx.fill(); ctx.restore(); // 描邊橢圓 ctx.save(); var radius = (xRadius > yRadius) ? xRadius : yRadius; var ratioX = xRadius / radius; var ratioY = yRadius / radius; ctx.translate(cx, cy); ctx.scale(ratioX, ratioY); ctx.translate(-cx, -cy); ctx.beginPath(); ctx.arc(cx, cy, radius, 0, 2*Math.PI, false); ctx.closePath(); ctx.lineWidth = 8; ctx.strokeStyle = '#bbb'; ctx.stroke(); ctx.restore(); // 橢圓進度 var percent = 0; function ellipseProgress() { if(percent <= 100) { percent = percent>100?100:percent; var angle = Math.round(360*percent/100); ctx.save(); var radius = (xRadius > yRadius) ? xRadius : yRadius; var ratioX = xRadius / radius; var ratioY = yRadius / radius; ctx.translate(cx, cy); ctx.scale(ratioX, ratioY); ctx.translate(-cx, -cy); ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI/180*angle, false); ctx.lineWidth = 8; ctx.strokeStyle = '#690'; ctx.stroke(); ctx.restore(); // 文本 ctx.clearRect(cx-20, cy-10, 54, 30); ctx.font = '20px seris'; ctx.fillStyle = '#f00'; ctx.fillText(percent+'%', cx-20, cy+10); window.requestAnimationFrame(ellipseProgress); } percent++; } ellipseProgress(); } </script> </body> </html> ~~~ 更多橢圓畫法及本文參考 http://web.jobbole.com/82960/