Передвижение по svg (path)

Подскажите, пожалуйста, как организовать движение картинок по path "паровозиком", как угодно, только не друг на друге (задать координаты в цикле не получилось, где-то ошибаюсь..). Фрагмент кода:

 
 
    var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d'); 
 
    var W = window.innerWidth, 
        H = window.innerHeight; 
    canvas.width  = W; 
    canvas.height = H; 
 
    var angle = 0; 
    
    var currentAngle = 0; 
    var TO_RADIANS = Math.PI / 180; 
    var particles = []; 
     
 
    var counter = 0; 
    var svg = document.getElementById("k9");//path из svg 
    var straightLength = svg.getTotalLength(); 
 
    function Particle() { 
 
    this.radius = 20; 
 
       this.x = svg.getPointAtLength(straightLength).x; 
       this.y = svg.getPointAtLength(straightLength).y; 
 
    this.move = function() { 
 
      for ( var g = 0; g < particles.length; g++){ 
 
        this.x = svg.getPointAtLength(counter*straightLength).x; 
        this.y = svg.getPointAtLength(counter*straightLength).y; 
 
    } 
    counter+=0.0003;//так картинки передвигаются по path друг на друге, как организовать нечто вроде "паровозика"? Перебрал много вариантов в цикле, но ничего не вышло.. 
 
 
        context.beginPath(); 
        context.globalCompositeOperation = "source-over"; 
 
        context.save(); 
        context.translate(this.x, this.y); 
        context.rotate(Gangle * TO_RADIANS); 
        var image = new Image(); 
        image.src = 'img/bag.png'; 
        context.drawImage(image,20, -20, 40, 40); 
        context.restore(); 
        angle+=0.1; 
 
 
    } 
    }; 
 
 
    for (var i = 0; i < 10; i++) { 
      var particle = new Particle(); 
        particles.push(particle); 
    } 
 
    function animate() { 
      context.clearRect(0, 0, canvas.width, canvas.height); 
      for (var i = 0; i < particles.length; i++) { 
        particles[i].move(); 
 
    } 
      requestAnimFrame(animate); 
    } 
    animate();
 






по SVG
передвижение по



Twitter
LinkedIn






      

      

  			

  

    
	  




		

			

        

          
ПОСЛЕДНИЕ ВОПРОСЫ

          
			
          

                			          					

          
13:29

          
Кофе для программистов: как напиток влияет на продуктивность кодеров?

          

                    					

          
22:13

          
Рекламные вывески: как привлечь внимание и увеличить продажи

          

                    					

          
19:13

          
Топ-5 трендов в мире наушников на 2025 год

          

                    					

          
16:04

          
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні

          

                    					

          
17:27

          
Выделенный сервер, что это, для чего нужен и какие характеристики важны?

          

                    					

          
22:17

          

          

                    					

          
18:08

          
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок

          

                    					

          
18:54

          
Анализ конкурентов в SEO: как обойти их в выдаче Google

          

                    					

          
17:35

          

          

              
          


          

          
Все вопросы

          

        

			

		

		








	

	

		

		

		
ТОП-10

		

			

			      			

        
        Почему SERVER_ADDR имеет не тот IP 47907 visits
        
			

            			

        
        Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30567 visits
        
			

            			

        
        Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23895 visits
        
			

            			

        
        Как через css изменить цвет png изображения? 10397 visits
        
			

            			

        
        Blob video url download 10004 visits
        
			

            			

        
        Php curl запрос через прокси с авторизацией 9275 visits
        
			

            			

        
        Работа с captcha vk api 8147 visits
        
			

      			

			
Все популярные вопросы

		

		

		

	

  

		
      

      

        



READ ALSO



	

  

      
      
javascript

      
Сравнение 2х массивов

    	
Всем привет, Имеется задача сравнить 2 массива и вывести результат с отсутствующим ID/
      231
  

  

      
      
javascript

      
Проигнорированный флаг JavaScript

    	
В простом тексте вздумалось мне найти буквосочетания:
      356
  

  

      
      
javascript

      
Проблема с отображением координат мыши

    	
Изучаю js и столкнулась с такой проблемой, мне нужно отобразить координаты мышки внутри блока, а сам блок двигать по вертикали в зависимости...
      247
  

  

      
      
javascript

      
Как скриптом взять текст в одном span и вставить в другой в место текста который в нем?

    	
Как с помощью скрипта взять текст из одного тега span и вставить в span с другим классом (с предварительной очисткой span, в который добавляется...
      402