HTML5利用定时器动态画圆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas</title>
<style type="text/css">
body{
padding:50px 100px;
}
canvas{
background:lightgreen;
display:block;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入您需要的百分比" />
<input type="button" value="点击绘制" />
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var input = document.getElementsByTagName("input")[0];
var btn = document.getElementsByTagName("input")[1];
var radius = 100;//圆的半径
var context = canvas.getContext('2d');
// context.arc()//绘制圆形
// 1.圆心X坐标 , Y坐标 3.radius , start , end , true="逆时针" false="顺时针"
function draw(end){
context.beginPath();
context.moveTo(canvas.width/2,canvas.height/2);
context.arc(canvas.width/2,canvas.height/2,radius,0,end,false);
context.closePath();
context.fillStyle = 'red';
context.fill();
}
function clear(){
context.clearRect(0,0,500,500);
}
// draw(2*Math.PI);
//把百分比转化成Math.PI
function change(value){
var num = value.substring(0,value.length-1);
return Math.PI*2*num/100;
}
//验证用户输入值
function inputErr(value){
var patt1 = RegExp(/^(100|[1-9]?\d(\.\d\d?)?)%$/);
var result = patt1.test(value);
return result;
}
btn.onclick = function(){
if(!inputErr(input.value)){
alert('请输入百分比');
return;
}
//利用定时器实现动态绘制
clear();
var numberEnd = 0;
var timer = setInterval(function(){
numberEnd ++;
draw(Math.PI*2*numberEnd/100);
if(numberEnd>parseInt(input.value)){
draw(change(input.value));
clearInterval(timer);
}
},10);
}
</script>
</body>
</html>
