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

303
21 июля 2017, 05:24

Подскажите, пожалуйста, как организовать движение картинок по 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();
 














      

      
      

        







READ ALSO




	

  

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

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

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

      222
  

  

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

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

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

      347
  

  

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

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

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

      237
  

  

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

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

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

      388