circle.js
var circleTimer;
var circleFlag = false;
var circle = {
run:function(opts)
{
if(!opts.id) throw new Error("must be canvas id.");
var canvas = document.getElementById(opts.id), ctx;
if(canvas && (ctx = canvas.getContext("2d")))
{
canvas.width = canvas.height = "300";
var noop = function(){};
var before = opts.onBefore || noop;
var ringDo = opts.onRingDo || noop;
var after = opts.onAfter || noop;
before(ctx);
var step = opts.step || 1;
var delay = opts.delay || 100;
var myRageNow = 0;
var myStepNow = 0;
var myRage = 360 * (opts.percent || 0);
var sRage = -Math.PI * 0.5;
var doDraw = function()
{
circleFlag = true;
myRageNow += step;
myStepNow += step;
if(myRageNow <= myRage)
{
if(myStepNow == 361)
{
myStepNow = 1;
ringDo(ctx);
}
ctx.fillStyle = opts.color || '#f76220';
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.arc(150, 150, 150, sRage, Math.PI * 2 * (myStepNow/360) + sRage);
ctx.fill();
circleTimer = setTimeout(doDraw, delay);
}
else
{
circleFlag = false;
after(ctx);
}
};
doDraw();
}
}
};
function percentTofloat(km)
{
if(km.substring(km.length-1,km.length)=="%")
{
km = km.substring(0,km.length-1);
km = km/100;
}
return km;
}
function circleBind(my_id,my_percent)
{
circle.run(
{
id:my_id,
percent: percentTofloat(my_percent),
onBefore:function(ctx){
ctx.fillStyle = '#e8e8e8';
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.arc(150, 150, 150, 0, Math.PI * 2);
ctx.fill();
},
onRingDo:function(ctx){
ctx.fillStyle = '#e8e8e8';
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.arc(150, 150, 150, 0, Math.PI * 2);
ctx.fill();
}
});
}
function circleStop()
{
clearTimeout(circleTimer);
}
function circleStatus()
{
return circleFlag;
}
circle.css
@charset "utf-8";
.round-wrap{
display:block;
position:relative;
width:100px;
height:100px;
overflow:hidden;
border-radius:65px;
-webkit-border-radius:65px;
}
.round-sector{
position:absolute;
width:100px;
height:100px;
}
.round-bg {
position:absolute;
width:100px;
height:100px;
background-color:#f76220;
border-radius:65px;
-webkit-border-radius:65px;
}
.round-circle{
position:absolute;
background-color:#FFF;
width:94px;
height:94px;
left:2.5px;
top:2.5px;
z-index:10;
border-radius:60px;
-webkit-border-radius:60px;
}
.round-circle p{
font-size:14px;
line-height:94px;
margin:0;
text-align:center;
width:100%;
font-weight:bold;
}
html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas畫圓動態顯示百分比</title>
<link type="text/css" rel="stylesheet" href="css/circle.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div class="round-wrap">
<div class="round-bg"></div>
<canvas id="crl0" class="round-sector"></canvas>
<div class="round-circle"><p>2</p></div>
</div>
<div class="round-wrap">
<div class="round-bg"></div>
<canvas id="crl1" class="round-sector"></canvas>
<div class="round-circle"><p>60%</p></div>
</div>
<div class="round-wrap">
<div class="round-bg"></div>
<canvas id="crl2" class="round-sector"></canvas>
<div class="round-circle"><p>0.89</p></div>
</div>
<script type="text/javascript" src="js/circle.js"></script>
<script>
$(document).ready(function()
{
circleBind("crl0","2");
circleBind("crl1","60%");
circleBind("crl2","0.89");
});
</script>
</body>
</html>
