Canvas计时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: 5px dashed #00BFFF;
}
</style>
</head>
<body>
<canvas id="o1" width="300" height="300"></canvas>
<canvas id="o2" width="300" height="300"></canvas>
<canvas id="o3" width="300" height="300"></canvas>
</body>
<script>
var can1 = o1.getContext("2d"); var can2 = o2.getContext("2d"); var can3 = o3.getContext("2d"); var a = 30 ,b = 50, c = 60; Tu(a,can1) Tu(b,can2) Tu(c,can3) function Tu(num,can){ var s = 0; var t = setInterval(move,1000/num); function move(){ s++; if(s>=num){ clearInterval(t); } var degs = s/100 *Math.PI*2; can.save(); can.clearRect(0,0,300,300) can.translate(150,150); can.rotate(-Math.PI/2); can.lineWidth = "30"; can.strokeStyle = "#00BFFF"; can.beginPath(); can.arc(0,0,100,0,degs); can.stroke(); can.closePath(); can.restore(); can.font="60px 宋体"; can.textAlign = "center"; can.textBaseline ="middle" can.fillText(s+"%",150,150); } } </script>
</html>