html5圆圈动画,html5canvas绘制动画圆环

body,canvas{ margin: 0; padding: 0;}

#canvas{ display: block; border: 1px solid #000; margin: 10px auto;}

当前浏览器不支持Canvas，请下载最新的浏览器！

window.onload = function(){

var m2 = 1;

var timer = null;

//获取画布的对象

var canvas = document.getElementById("canvas");

//设置canvas上下文环境

var context = canvas.getContext('2d');

//设置画布的宽高

canvas.width = '400';

canvas.height = '400';

//运用定时器对圆环的终止弧度进行动态增加

timer = setInterval(function(){

m2 = m2+0.05;

if (m2 >= 2) {

m2 = 2;

//当弧度大于设定的弧度清除定时器

clearInterval(timer);

}

context.clearRect(0,0,400,400);//每次进行绘制前，把之前绘制的图像删除掉

drawArc( context,m2);//调用绘制圆环的方法

},40);

}

//自定义一个绘制圆环的方法

var drawArc = function(txt,m2){

txt.strokeStyle = '#f89f97';

txt.lineWidth = '4';

txt.beginPath();

txt.arc(200,200,100,1*Math.PI,m2*Math.PI,false);

txt.stroke();

txt.closePath();

}