<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Canvas</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="fragment" content="!"/>
<script src="./js/underscore.js"></script>
<script src="./js/jquery.min.js"></script>
<style>
p{
padding: 0;
margin: 0;
}
#myCanvas{
border: 1px solid #d6d6d6;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#myCanvas2{
border: 1px solid #d6d6d6;
position: absolute;
left: 0;
top: 0;
z-index: 2;
opacity: 0.1;
}</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<canvas id="myCanvas2" width="200" height="200"></canvas>
<script>
var c2 = document.getElementById("myCanvas2");
var ctx2 = c2.getContext("2d");
ctx2.beginPath();
ctx2.lineWidth = 10;
ctx2.strokeStyle ="rgb(0,0,0)";
ctx2.lineCap ="round";
ctx2.arc(100,100,80,0.75*Math.PI,0.25*Math.PI);
ctx2.stroke();
ctx2.closePath();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var endPoint = 0.75*Math.PI;
var color = "rgb(143,193,31)";
var animate1 =function(iTarget){
iTarget = iTarget * 1.5*Math.PI + 0.75 *Math.PI;
var timer = setInterval(function(){
ctx.beginPath();
ctx.lineWidth= 10;
ctx.clearRect(0,0,200,200);
ctx.strokeStyle = color;
ctx.shadowBlur=2;
ctx.shadowColor=color;
ctx.lineCap ="round";
console.log(iTarget/Math.PI);
if(iTarget > endPoint){
endPoint += 0.01 * 1.5* Math.PI;
if(endPoint > 1.5 *Math.PI && endPoint < 1.95 *Math.PI){
color = "#fbed00";
}
else if(endPoint > 1.95 *Math.PI){
color = "#ff0000";
}
}
else{
endPoint =iTarget;
clearInterval(timer);
}
ctx.arc(100,100,80,0.75*Math.PI,endPoint);
ctx.stroke();
ctx.closePath();
},10);
};
</script>
</body>
</html>
原文：http://www.cnblogs.com/JaremyCheng/p/3946244.html