<canvas id=”c1″ width=”400″ height=”400″></canvas>
![]()
![](https://img-blog.csdn.net/20160713123033012?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
<script>window.onload = function() {
var t = 99;
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var oB = (-90)*Math.PI/180;
var oR = (-25+t)*3.6*Math.PI/180;
function toDraw(){
var x = 200;
var y = 200;
var r = 150;
oGC.strokeStyle = '#abcdef';
oGC.lineWidth = '10';
oGC.beginPath();
oGC.arc(x,y,r,oB,oR,false);
oGC.stroke();
oGC.font = "Bold 50px Arial";
oGC.fillStyle = "#ccc";
oGC.textAlign = "center";
oGC.fillText(t+'%',x,y+10);
document.getElementById('num').innerHTML=t+'%';
}
toDraw();
}
</script>
效果图: