标签：
用canvas作的进度圆形
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } canvas { margin: 10px; width: 194px; /*border: 1px solid red;*/ } </style> </head> <body> <canvas data-per=‘10‘ width=194 height=194></canvas> <canvas data-per=‘24‘ width=194 height=194></canvas> <canvas data-per=‘45‘ width=194 height=194></canvas> <canvas data-per=‘65‘ width=194 height=194></canvas> <canvas data-per=‘77‘ width=194 height=194></canvas> <canvas data-per=‘89‘ width=194 height=194></canvas> </body> </html>
<script> ; (function(window) { window.addEventListener(‘load‘, per); function per() { var aCanvas = document.querySelectorAll(‘canvas‘), i = 0; for (; i < aCanvas.length; i++) { if (aCanvas[i].dataset.per>=0) { Circle(aCanvas[i]) } }; function Circle(canvas) { var canvas = canvas, context = canvas.getContext(‘2d‘), //弧形开始位置为-90°，即0.25弧度 num = canvas.dataset.per, scale = (num / 100 - 0.25); //渐变 外环 context.beginPath(); context.lineWidth = 14; var gradiient = context.createLinearGradient(0, 0, 0, 150); gradiient.addColorStop(0, ‘#e0e0e0‘); gradiient.addColorStop(1, ‘#f0f0f0‘); context.strokeStyle = gradiient; context.arc(97, 97, 90, 0, Math.PI * 2, false); context.stroke(); //环形 重合底部 context.beginPath(); context.shadowColor = "#aaa"; context.shadowBlur = 2; context.shadowOffsetX = -1 context.shadowOffsetY = -1 context.strokeStyle = ‘#ccc‘; context.arc(97, 97, 80, 0, Math.PI * 2, false); context.lineWidth = 13; context.stroke() //渐变 比例 context.beginPath(); context.lineWidth = 13; var gradiient = context.createLinearGradient(150, 0, 0, 150); gradiient.addColorStop(0, ‘#ff533a‘); gradiient.addColorStop(1, ‘#9c1d22‘); context.strokeStyle = gradiient; context.arc(97, 97, 80, -Math.PI / 2, scale * Math.PI * 2, false); context.stroke(); //内圆 阴影 context.beginPath(); context.arc(97, 97, 73, 0, Math.PI * 2); context.fillStyle = "#fff"; context.shadowColor = "#898989"; context.shadowBlur = 2; context.shadowOffsetX = -1 context.shadowOffsetY = 2 context.fill(); context.closePath(); //文字 context.beginPath(); context.fillStyle = ‘#d20001‘; // 上边设置的 阴影影响文字，需要重置文字阴影 context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.font = ‘44px 微软雅黑‘; if (num > 9) { //单双数，文字位置 context.fillText(num, 64, 115); } else { context.fillText(num, 84, 115); } context.font = ‘28px 微软雅黑‘; context.fillText(‘%‘, 114, 115); context.stroke() } } })(window); </script>
标签：
原文地址：http://www.cnblogs.com/chenweizhong/p/4263072.html
