Как сделать рисование линий на каждом слайде в слайд-шоу? - PullRequest
Новая
       12

Как сделать рисование линий на каждом слайде в слайд-шоу?

0 голосов
/ 26 февраля 2020

Я пытаюсь сделать слайд-шоу с рисованием линий на каждом слайде. Но линии нарисованы только на первом слайде и остаются там навсегда, в то время как другие слайды пусты. Вот мой HTML код: 

<div id="slides-container">
  <ul id="slides">
    <li class="slide showing">
      Slide 1
      <canvas id="canvas"></canvas>
    </li>
    <li class="slide">
      Slide 2
      <canvas id="canvas"></canvas>
    </li>
    <li class="slide">
      Slide 3
      <canvas id="canvas"></canvas>
    </li>
  </ul>
  <button class="controls" id="pause">Pause</button>
</div>

И js / jquery код: 

    $(document).ready(function(){
      var slides = document.querySelectorAll('#slides .slide');
      var currentSlide = 0;
      var slideInterval = setInterval(nextSlide,5000);
      var canvas = document.getElementById("canvas");
      var c = canvas.getContext("2d");
      var imageData = c.getImageData(0,0,canvas.width,canvas.height);

      var startX1 = 50;
      var startY1 = 50;
      var endX1 = 100;
      var endY1 = 50;
      var amount1 = 0;

      var startX2 = 100;
      var startY2 = 70;
      var endX2 = 150;
      var endY2 = 70;
      var amount2 = 0;

      var animateTopLine = setInterval(drawTopLine, 30);
      var animateMidLine = setInterval(drawMidLine, 50);

      function nextSlide(){
        slides[currentSlide].className = 'slide';
        currentSlide = (currentSlide+1)%slides.length;
        slides[currentSlide].className = 'slide showing';
        setTimeout(function () {
          c.putImageData(imageData, 0, 0);
        }, 1000);
        animateTopLine = setInterval(drawTopLine, 30);
        animateMidLine = setInterval(drawMidLine, 50);
        imageData = c.getImageData(0,0,canvas.width,canvas.height);
      }

      var playing = true;
      var pauseButton = document.getElementById('pause');

      function pauseSlideshow(){
        pauseButton.innerHTML = 'Play';
        playing = false;
        clearInterval(slideInterval);
        clearInterval(animateTopLine);
        clearInterval(animateMidLine);
      }

      function playSlideshow(){
        pauseButton.innerHTML = 'Pause';
        playing = true;
        slideInterval = setInterval(nextSlide,5000);
      }

      pauseButton.onclick = function(){
        if(playing){ pauseSlideshow(); }
        else{ playSlideshow(); }
      };

      function drawTopLine() {
        amount1 += 0.05; 
        if (amount1 > 1) amount1 = 1;
        c.clearRect(0, 0, canvas.width, canvas.height);
        c.strokeStyle = "black";
        c.moveTo(startX1, startY1);
        c.lineTo(startX1 + (endX1 - startX1) * amount1, startY1 + (endY1 - startY1) * amount1);
        c.stroke();
      }

      function drawMidLine() {
        amount2 += 0.05;
        if (amount2 > 1) amount2 = 1;
        c.clearRect(0, 0, canvas.width, canvas.height);
        c.strokeStyle = "black";
        c.moveTo(startX2, startY2);
        c.lineTo(startX2 + (endX2 - startX2) * amount2, startY2 + (endY2 - startY2) * amount2);
        c.stroke();
      }
   });

Я пытаюсь добиться того, чтобы каждый раз, когда отображался каждый слайд, на нем должны появиться две линии, как в первый раз. Не могли бы вы сказать мне, что не так с моим кодом?

...