Демо JavaScript:
<canvas width = "500" height = "500" id = "paint"></canvas> <script> var x1,y1; var x2,y2; var check; var check2; window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame })(); window.onload =function(){ x1=0; y1=0; x2=0; y2=0; check=0 check2=0; Animation(); } function Animation(){ var ctx = document.getElementById("paint").getContext("2d"); ctx.beginPath(); ctx.fillRect(0,0,500,500); ctx.closePath; r=200; if(check2==0){//двигаем окружности y2+=0.5; x2+=0.1; x1+=0.5; y1+=0.1; if(x1==15.0){ check2=1; } } else{ x1-=0.5; y1-=0.1; x2-=0.1; y2-=0.5; if(x1==-15.0){ check2=0; } } while(r>=20){//рисуем круги, уменьшая радиус circle(r); r-=20; check=(check+1)%2; } requestAnimFrame(Animation); } function circle(r){//функция, рисующая круги var ctx = document.getElementById("paint").getContext("2d"); ctx.beginPath(); if(check==0){ ctx.fillStyle="white"; ctx.arc(250+x1,250+y1,r,0,2*Math.PI); ctx.fill(); ctx.closePath(); } else{ ctx.fillStyle="black"; ctx.arc(250+x2,250+y2,r,0,2*Math.PI); ctx.fill(); ctx.closePath(); } } </script>