椭圆及椭圆进度 · 前端技术总结

本示例的椭圆画法是利用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/