Язык программирования:
Javascript
Среда программирования:
HTML5 + JS
<body style="background: black"> <canvas id="canvas1" style="background: black; position:absolute"></canvas> </body> <script> canvas = document.getElementById("canvas1") ctx = canvas.getContext("2d") w = canvas.width = 500 h = canvas.height = 500 canvas.style.top = window.innerHeight/2 - h/2 + "px" canvas.style.left = window.innerWidth/2 - w/2 + "px" ctx.lineWidth = 2 ctx.fillStyle = '#fff' ctx.strokeStyle = '#fff' ctx.translate(w/2,h/2) function point(x,y){ //структура: 2D точка this.x = x this.y = y } var points = [new point(100,100),new point(-100,100),new point(-100,-100),new point(100,-100)] //вершины var edges = [ [0,1], [0,2], [1,3], [3,2], [0,3], [2,1] ] //ребра s=5 //скорость анимации shots = [] //стек, чтобы прокручивать анимацию обратно stop = false first=true wait = 0 function drawfigure(){ //функция отрисовки вершин и связей for(i of edges){ ctx.beginPath() ctx.moveTo(points[i[0]].x,points[i[0]].y); ctx.lineTo(points[i[1]].x,points[i[1]].y); ctx.stroke() ctx.closePath() } for(j of points){ ctx.beginPath() ctx.moveTo(j.x-10,j.y-10); ctx.lineTo(j.x+10,j.y-10); ctx.lineTo(j.x+10,j.y+10); ctx.lineTo(j.x-10,j.y+10); ctx.lineTo(j.x-10,j.y-10); ctx.fill() ctx.closePath() } } function draw(){ if(wait)wait--//отсчет паузы else{ ctx.clearRect(-w/2,-h/2,w,h)//очищаем canvas if(points[3].y!=0){//если последня точка еще не в нуле if(!wait) for(i in points){ if(i%2!=0){ //двигаем четные и нечетные в обратом порядке if(points[i].x!=0) points[i].x>0?points[i].x-=s:points[i].x+=s else if (points[i].y!=0) points[i].y>0?points[i].y-=s:points[i].y+=s if(Math.abs(points[i].x)>50)break //начинаем движение след. точки, когда текущая пройдет половину пути } else{ if (points[i].y!=0) points[i].y>0?points[i].y-=s:points[i].y+=s else if(points[i].x!=0) points[i].x>0?points[i].x-=s:points[i].x+=s if(Math.abs(points[i].y)>50)break } } drawfigure()//рисуем фигуру } if(points[3].y==0&&shots.length>0&&!wait){ if(first){ wait = 30 //запускаем паузу first=false } else ctx.putImageData(shots.pop(),-w/2,-h/2)//скриншоты - в стек } else if(points[3].y!=0) shots.push(ctx.getImageData(-w/2,-h/2,2*w,2*h)) //достаем скрины из стека else{ //запускаем анимацию заново points = [new point(100,100),new point(-100,100),new point(-100,-100),new point(100,-100)] drawfigure() first=true wait=30 } } requestAnimationFrame(draw) } draw() </script>
Прикрепленный файл | Размер |
---|---|
sirota_4.rar | 1.3 кб |