<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>多用户留言系统-</title> <meta name="description" content=""> <meta name="keywords" content=""> <!--[if IE]> <script src="html5.js"></script> <script src="excanvas.compiled.js"></script> <![endif]--> <link href="" rel="stylesheet"> <style> /*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu,canvas{display:block} </style> </head> <body> <canvas id="canvas" width="300" height="300"> <p>抱歉，您的浏览器不支持canvas</p> </canvas> </body> </html> <script type="text/javascript"> window.onload = function(){ toCanvas('canvas',50); } function toCanvas(id ,progress){ var canvas = document.getElementById(id), ctx = canvas.getContext("2d"), percent = progress, circleX = canvas.width / 2, circleY = canvas.height / 2, radius = 100, lineWidth = 5, fontSize = 20; function smallcircle1(cx, cy, r) { ctx.beginPath(); //ctx.moveTo(cx + r, cy); ctx.lineWidth = 1; ctx.fillStyle = '#06a8f3'; ctx.arc(cx, cy, r,0,Math.PI*2); ctx.fill(); } function smallcircle2(cx, cy, r) { ctx.beginPath(); //ctx.moveTo(cx + r, cy); ctx.lineWidth = 1; ctx.fillStyle = '#06a8f3'; ctx.arc(cx, cy, r,0,Math.PI*2); ctx.fill(); } function circle(cx, cy, r) { ctx.beginPath(); //ctx.moveTo(cx + r, cy); ctx.lineWidth = lineWidth; ctx.strokeStyle = '#eee'; ctx.arc(cx, cy, r, Math.PI*2/3, Math.PI * 1/3); ctx.stroke(); } function sector(cx, cy, r, startAngle, endAngle, anti) { ctx.beginPath(); //ctx.moveTo(cx, cy + r); // 从圆形底部开始画 ctx.lineWidth = lineWidth; // 渐变色 - 可自定义 var linGrad = ctx.createLinearGradient( circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY ); linGrad.addColorStop(0.0, '#06a8f3'); //linGrad.addColorStop(0.5, '#9bc4eb'); linGrad.addColorStop(1.0, '#06a8f3'); ctx.strokeStyle = linGrad; ctx.lineCap = 'round'; ctx.arc( cx, cy, r, (Math.PI*2/3), (Math.PI*2/3) + endAngle/100 * (Math.PI*5/3), false ); ctx.stroke(); } function loading() { if (process >= percent) { clearInterval(circleLoading); } ctx.clearRect(0, 0, circleX * 2, circleY * 2); ctx.font = fontSize + 'px April'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#999'; ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY); circle(circleX, circleY, radius); sector(circleX, circleY, radius, Math.PI*2/3, process); smallcircle1(150+Math.cos(2*Math.PI/360*120)*100, 150+Math.sin(2*Math.PI/360*120)*100, 2); smallcircle2(150+Math.cos(2*Math.PI/360*(120+process*3))*100, 150+Math.sin(2*Math.PI/360*(120+process*3))*100, 2); if (process / percent > 0.90) { process += 0.30; } else if (process / percent > 0.80) { process += 0.55; } else if (process / percent > 0.70) { process += 0.75; } else { process += 1.0; } } var process = 0.0; var circleLoading = window.setInterval(function () { loading(); }, 20); } </script>