<!DOCTYPE html> <html> <head> <title> </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <!-- <fieldset></fieldset> --> <canvas id="myCanvas" width="400px" height="400px" >Your browser does not support the HTML5 canvas tag.</canvas> <script type="text/javascript"> /** * ctx: Canvas对象 * data: 用于绘制圆环的数据来源 * option: 配置圆环半径和圆心位置 */ function yuanhuan(ctx, data, option) { var cood = option.cood; var radius = option.radius; var lastpos = pos = 0; // 计算总的value值 var sum = 0; for(var i = 0; i < data.length; i++){ sum += data[i].value; }; for (var i = 0; i < data.length; i++) { // 开始一个新的绘制路径 ctx.beginPath(); // 移动到指定位置开始新的路径 ctx.moveTo(cood.x, cood.y); // 指定填充颜色 ctx.fillStyle = data[i].bgcolor; pos = lastpos + Math.PI * 2 * data[i].value / sum; ctx.arc(cood.x, cood.y, radius, lastpos, pos, false); ctx.fill(); lastpos = pos; } // 开始一个新的绘制路径，画中间白色区域 ctx.beginPath(); ctx.fillStyle = "white"; radius *= 0.5; ctx.arc(cood.x, cood.y, radius, 0, Math.PI * 2, false); ctx.fill(); }; var data = [{ bgcolor: '#D53A35', value: 335 }, { bgcolor: '#2F4554', value: 310 }, { bgcolor: '#61A0A8', value: 234 }, { bgcolor: '#D48265', value: 135 }, { bgcolor: '#91C7AE', value: 1548 }]; var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); yuanhuan(ctx, data, { cood: { x: 200, // 圆环中心x、y坐标 y: 200 }, radius: 150 // 圆环半径 }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <style type="text/css"> canvas { border: 1px solid #1F232A; } .div { width: 400px; height: 50px; } input, button { text-align: center; font-size: 20px; } </style> <body> <canvas id="main" width="450" height="300"></canvas> <div class="div"> 进度：<input id="num" type="number" value="100" max="100" /> <button id="makeSure">确定</button> </div> </body> <script type="text/javascript"> var makeSure = document.getElementById("makeSure"); makeSure.onclick = function() { var ctx = document.getElementById("main").getContext("2d"); ctx.clearRect(0, 0, 450, 300); var num = parseInt(document.getElementById("num").value) + 1; if (num <= 101) { for (var x = 0; x < num; x++) { (function(x) { setTimeout(function() { ctx.beginPath() ctx.lineWidth = 10; ctx.strokeStyle = 'orange'; ctx.arc(200, 200, 50, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180); ctx.stroke(); ctx.clearRect(390, 25, 50, 50); ctx.clearRect(175, 175, 55, 55) ctx.fillStyle = 'orange'; ctx.fillRect(10 + x * 3.5, 30, 3.5, 40); ctx.font = "20px Arial"; ctx.fillText(x + "%", 390, 58) ctx.fillText(x + "%", 175, 208) }, x * 30); })(x); } } else { alert("请输入0-100之间的数字") } } makeSure.click(); </script> </html>