Почему не работает скрипт для анимации?

Question

AlbertS001 @AlbertS001

Почему не работает скрипт для анимации?

Скрипт должен выводить круг со вложенными окружностям и со стрелками, которые двигаются, однако выводит только одну статичную окружность. В чём причина?

Код

function StartCircleAnimation()  
{ 
  var servicesIllustration = document.getElementById("services-infographic"); 
   
  if(servicesIllustration.getContext)  
{ 
    var context = servicesIllustration.getContext("2d"); 
    var illustrationHeight = servicesIllustration.height; 
    var illustrationWidth = servicesIllustration.width; 
    var serviceHoverIn = false; 
    var serviceHoverOut = false; 
     
    var Service = function(x, y, radius, color, title, alt)  
{ 
      this.x = x; 
      this.y = y; 
      this.radius = radius; 
      this.color = color; 
      this.hoverInnerRadius = 13; 
      this.hoverOuterRadius = 75; 
      this.title = title; 
      this.alt = alt; 
      this.arrowAngle = -180; 
      this.arrowRotation = 0; 
    } 
     
    var services = new Array(); 
     
services.push(new Service(230, 230, 130, "rgba(0,0,0,.7)", "Здесь могла быть ваша реклама!", false)); 
     
    var animate=function() { 
      context.clearRect(0, 0, illustrationWidth, illustrationHeight); 
      var servicesLength = services.length; 
       
       
       
      for(var i = 0; i < servicesLength; i++) { 
         
        var tmpService = services[i]; 
         
        // Внешняя окружность 
        context.strokeStyle = "rgba(0,0,0,0.05)"; 
        context.beginPath(); 
context.arc(tmpService.x, tmpService.y, (tmpService.radius + tmpService.hoverOuterRadius), 0, Math.PI * 2, false); 
        context.closePath(); 
        context.stroke(); 
         
        // Внутренняя окружность 
        context.strokeStyle = "rgba(0,0,0,.07)"; 
        context.beginPath(); 
context.arc(tmpService.x, tmpService.y, (tmpService.radius + tmpService.hoverInnerRadius), 0, Math.PI * 2, false); 
        context.closePath(); 
        context.stroke(); 
         
        // Центральный круг 
        context.fillStyle = tmpService.color; 
        context.beginPath(); 
context.arc(tmpService.x, tmpService.y, tmpService.radius, 0, Math.PI * 2, false); 
        context.closePath(); 
        context.fill(); 
         
        context.font = "16px Helvetica, Arial, sans-serif"; 
        context.textBaseline = "middle"; 
        context.textAlign = "center"; 
        context.fillStyle = "white"; 
        context.strokeStyle = "rgba(0, 0, 0, 0.2)"; 
        context.fillText(tmpService.title, tmpService.x, tmpService.y); 
         
        // Стрелки 
topArrowX = tmpService.x + ((tmpService.radius + tmpService.hoverInnerRadius) * 
Math.cos(tmpService.arrowAngle*(Math.PI/180))); 
topArrowY = tmpService.y + ((tmpService.radius + tmpService.hoverInnerRadius) * 
Math.sin(tmpService.arrowAngle*(Math.PI/180))); 
         
//Метод Translate() переносит координаты стрелок при перевороте холста; 
        context.save(); 
        context.translate(topArrowX, topArrowY); 
        context.rotate(tmpService.arrowRotation*(Math.PI/180)); 
        drawArrow(0, 0); 
        context.restore(); 
         
bottomArrowX = tmpService.x + ((tmpService.radius + 
tmpService.hoverInnerRadius) * Math.cos((tmpService.arrowAngle + 180)*(Math.PI/180))); 
bottomArrowY = tmpService.y + ((tmpService.radius + tmpService.hoverInnerRadius) * Math.sin((tmpService.arrowAngle + 180)*(Math.PI/180))); 
         
        context.save(); 
        context.translate(bottomArrowX, bottomArrowY); 
        context.rotate((tmpService.arrowRotation + 180)*(Math.PI/180)); 
        drawArrow(0, 0); 
        context.restore(); 
         
        tmpService.arrowAngle++; 
        tmpService.arrowRotation++; 
         
        setTimeout(animate, 24);     
         
      } 
    } 
     
    // Функция отрисовывает стрелки 
    var drawArrow = function(arrowMiddlePointX, arrowMiddlePointY) { 
      context.beginPath(); 
      var arrowStartingPointX = arrowEndPointX = arrowMiddlePointX - 7; 
      var arrowStartingPointY = arrowMiddlePointY - 6; 
      var arrowEndPointY = arrowMiddlePointY + 6; 
      context.beginPath(); 
      context.moveTo(arrowStartingPointX, arrowStartingPointY); 
      context.lineTo(arrowMiddlePointX, arrowMiddlePointY); 
      context.lineTo(arrowEndPointX, arrowEndPointY); 
      context.lineTo(arrowMiddlePointX, arrowMiddlePointY); 
      context.moveTo(arrowStartingPointX, arrowStartingPointY); 
      context.closePath(); 
      context.stroke();       
    } 
     
    animate(); 
     
  } 
   
}