HTML5 Canvas+js meniru animasi pemuatan fail pengimbasan cakera rangkaian Baidu

Ini ialah HTML5 Canvas+js ringkas yang meniru proses pengimbasan fail Baidu Netdisk memuatkan kesan animasi, peratusan pengimbasan fail netdisk memuatkan kesan khas animasi.

var w=document.body.clientWidth;
var h=document.body.clientHeight;
var canvas=document.createElement('canvas');
canvas.width=w;
canvas.height=h;
document.body.appendChild(kanvas);
canvas.style.backgroundColor="#0073B3";
var context=canvas.getContext('2d');
var Rot=0;
var R_init=0;
var timer=null;
var target_R=Math.round(w/10);
setInterval( function(){

R_init=R_init+1;
if(R_init<targent_R+1)
{
Drawcilrcle(konteks,R_init);

if(R_init===targent_R){
setTimeout(fungsi(){

clearInterval(pemasa);

pemasa= setInterval( function(){
Reput=Reput+1;
jika(Reput<180)
{
Drawcilrcle(konteks,sasaran_R);
Drawmove(konteks,target_R,Reput);
Drawmove_bottom(konteks,target_R,Reput);
Drawtext(konteks,Reput)
}

lain jika(Reput ===180){
Drawcilrcle(konteks,sasaran_R);
Drawfinsh(konteks,target_R,360);
Drawtext(konteks,Reput);

}


},10);
},50);
}
}


},5);