<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas制作原生的百分比圆形比例等</title> <style> *{margin:0;padding:0;} body{text-align:center;} </style> </head> <body> <div class="chart"> <canvas id="canvas" width="300" height="300" style="border:1px solid #e5e5e5"></canvas> </div> </body> </html>
<script type="text/javascript"> window.onload = function(){ var draw = document.getElementById("canvas"); if(!draw.getContext){ return false; } var context=draw.getContext('2d'), centerX=draw.width/2, centerY=draw.height/2, angle= 0.6, //占的百分数 color=[], //"#e5e5e5","red","#F00" font="40px Arial"; speed = 0; //从度数开始50---》表示从50度开始 context.lineCap="round"; //square 平角的帽 //绘制外圈的圆 function blueCircle(){ context.save();//save() 方法保存当前图像状态的一份拷贝。 context.strokeStyle = color[0] || "#e5e5e5"; //设置描边样式 context.lineWidth = 5; //设置线宽 context.beginPath();//路径开始 //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针) context.arc(centerX,centerY,centerX-5,0,2*Math.PI,false); context.stroke(); context.closePath(); //路径结束 context.restore();//save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态,然后,通过调用 restore() 来恢复以前的值。 } //绘制红色外圈 function redCircle(n){ context.save(); context.strokeStyle = color[1] || "red"; //设置描边样式 context.lineWidth = 5; //设置线宽 context.beginPath(); context.arc(centerX, centerY, centerX-5 , -Math.PI /2, (n * 3.6 - 90) * Math.PI / 180, false); context.stroke(); context.closePath(); context.restore(); } //百分比文字绘制 function text(n){ context.save(); //save和restore可以保证样式属性只运用于该段canvas元素 context.beginPath(); context.font =font || "40px Arial"; //设置字体大小和字体 context.fillStyle=color[2] || "#333"; context.textAlign='center';//文本程度对齐方法 context.textBaseline='middle';//文本垂曲标的目的,基线位置 //绘制字体,并且指定位置 context.fillText(n.toFixed(0)+"%", centerX, centerY); context.stroke(); //执行绘制 context.closePath(); context.restore(); } //自己一直调用自己动画循环 var timer=null; (function drawFrame(){ timer=setTimeout(drawFrame,10); context.clearRect(0, 0, draw.width, draw.height); blueCircle(); redCircle(speed); text(speed); if(speed >= angle*100){ clearTimeout(timer); } speed += 0.2; }()); } </script>