首页 > 代码库 > 2015-1-30
2015-1-30
用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>
2015-1-30
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。