Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.07.2017, 09:01
Интересующийся
Отправить личное сообщение для Negotiant Посмотреть профиль Найти все сообщения от Negotiant
 
Регистрация: 27.03.2017
Сообщений: 28

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное пролистывание картинок слайдера Corazon Элементы интерфейса 3 30.01.2017 22:07
Смена картинок на JS. Помогите реализовать! Aggao Элементы интерфейса 3 27.11.2014 23:32
Как можно узнать\вычислить кол-во доступных картинок desertFox Общие вопросы Javascript 5 18.08.2014 14:41
Автопереключатель картинок Vempel Общие вопросы Javascript 0 03.10.2013 18:36
Загрузчик картинок Livanderiaamarum Общие вопросы Javascript 1 15.01.2012 17:21