HTML5 Canvas+js는 Baidu 네트워크 디스크 스캐닝 파일 프로세스 로딩 애니메이션을 모방합니다.

이것은 Baidu Netdisk 파일 스캐닝 프로세스 로딩 애니메이션 효과, 넷디스크 파일 스캐닝 비율 로딩 애니메이션 특수 효과를 모방한 간단한 HTML5 Canvas+js입니다.

var w=document.body.clientWidth;
var h=document.body.clientHeight;
var canvas=document.createElement('canvas');
canvas.width=w;
canvas.height=h;
document.body.appendChild(캔버스);
canvas.style.BackgroundColor="#0073B3";
var context=canvas.getContext('2d');
var 회전=0;
var R_init=0;
var 타이머=null;
var target_R=Math.round(w/10);
setInterval(함수(){

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

if(R_init===target_R){
setTimeout(함수(){

ClearInterval(타이머);

타이머= setInterval(함수(){
썩음=썩음+1;
if(Rot<180)
{
Drawcilrcle(context,target_R);
Drawmove(context,target_R,Rot);
Drawmove_bottom(context,target_R,Rot);
텍스트 그리기(컨텍스트,썩음)
}

else if(Rot===180){
Drawcilrcle(context,target_R);
Drawfinsh(context,target_R,360);
텍스트 그리기(컨텍스트,썩음);

}


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


},5);