android 数字画圈动画,通用canvas代码实现的JS画圆圈动画特效

您的浏览器不支持canvas！

圆

var canvas = document.getElementById('myCanvas'),width = canvas.width,height = canvas.height,ctx = canvas.getContext('2d');

var step,startAngle,endAngle,add=Math.PI*2/100;

ctx.shadowOffsetX = 0; // 设置水平位移

ctx.shadowOffsetY = 0; // 设置垂直位移

ctx.shadowBlur = 10; // 设置模糊度

ctx.lineWidth = 1.0;

counterClockwise = false;

var x;

var y;

var radius;

var animation_interval = 20,n = 100;

var varName;

function actiondo(){

step=1;

startAngle=0;

ctx.strokeStyle ='#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);//圆圈颜色

ctx.shadowColor = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); // 设置阴影颜色

//圆心位置

x=Math.floor(Math.random()*1000+100);

y=Math.floor(Math.random()*100+100);

radius = Math.floor(Math.random()*50+50);

varName= setInterval(animation, animation_interval);

}

var animation = function () {

if (step <= n) {

endAngle = startAngle + add ;

drawArc(startAngle, endAngle);

startAngle = endAngle;

step++;

} else {

clearInterval(varName);

}

};

function drawArc(s, e) {

ctx.beginPath();

ctx.arc(x, y, radius, s, e, counterClockwise);

ctx.lineWidth = 1.0;

ctx.stroke();

}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]