Rotating Radiation Logo

Var canvas = document. getElementById ("myCanvas ");
Var context = canvas. getContext ("2d ");
Var startP = [0, 0.67, 1.34];
Var endP = [0.3, 0.97, 1.64];
Var n = 0.01;
Var animate;
Window. onload = initPage;
 
Function initPage (){
Var speed = document. getElementsByTagName ("select") [0]. value;
Window. clearInterval (animate );
Animate = setInterval ("show ()", speed );
}
 
Function show (){
Context. clearRect (0, 0, 500,500 );
For (var I = 0; I <3; I ++ ){
StartP [I] + = n;
EndP [I] + = n;
If (startP [I] = 2 ){
StartP [I] = 0;
}
If (endP [I] = 2 ){
EndP [I] = 0;
}
}
Context. beginPath ();
Context. rect (0, 0, 500,500 );
Context. lineWidth = 1;
Context. fillStyle = "# F2CA07 ";
Context. fill ();
Context. stroke ();
 
Context. beginPath ();
Context. arc (250,250, 10, 0, 2 * Math. PI, false );
Context. lineWidth = 1;
Context. fillStyle = "#333 ";
Context. fill ();
Context. stroke ();
 
Context. beginPath ();
Context. arc (250,250,100, startP [0] * Math. PI, endP [0] * Math. PI, false );
Context. lineWidth = 160;
Context. strokeStyle = "#333 ";
Context. stroke ();
 
Context. beginPath ();
Context. arc (250,250,100, startP [1] * Math. PI, endP [1] * Math. PI, false );
Context. lineWidth = 160;
Context. strokeStyle = "#333 ";
Context. stroke ();
 
Context. beginPath ();
Context. arc (250,250,100, startP [2] * Math. PI, endP [2] * Math. PI, false );
Context. lineWidth = 160;
Context. strokeStyle = "#333 ";
Context. stroke ();
}

Demo

Excerpt from jian sheng's code Memorandum