Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Wyświetlanie elementu statycznego na canvie z animacją.

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Wyświetlanie elementu statycznego na canvie z animacją.

Post 12.03.2018, 19:41:13

Witam forumowiczów.
Od kilku godzin szukam rozwiązania mojego problemu, a mianowicie: mam animację stworzoną na canvie, ale chciałambym, żeby oprócz animacji na płótnie były również 2 czerwone kulki połączone linią (statyczne, po prostu narysowane).
Po wykonaniu kodu poniżej, niestety pozostaje sama animacja.

Kod: Zaznacz cały
button2.onclick = function()
{
   //Wodor
      c.fillStyle = 'red';
      c.beginPath();
      c.arc(600, 200, 30, 0, Math.PI*2, false);
      c.strokeStyle = 'red';
      c.stroke();
      c.fill();
      c.fillStyle = 'red';
      c.beginPath();
      c.arc(800, 200, 30, 0, Math.PI*2, false);
      c.strokeStyle = 'red';
      c.stroke();
      c.fill();
   //Wiazanie H1 z H2
      c.beginPath();
      c.moveTo(600, 200);
      c.lineTo(800, 200);

      
function Atom(x, y, dx, dy, radius)
{
   c.beginPath();
   this.x = x;
   this.y = y;
   this.dx = dx;
   this.dy = dy;
   this.radius = radius;
   
   this.draw = function()
   {
      c.beginPath();
      c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
      c.fillStyle = 'white';
      c.strokeStyle = 'white';
      c.stroke();
      c.fill();
      
   }
   
   this.update = function ()
   {
      if (this.x + this.radius > innerWidth || this.x - this.radius < 0)
      {
         this.dx = -this.dx;
      }
      if (this.y + this.radius > innerHeight || this.y - this.radius < 0)
      {
         this.dy = -this.dy;
      }
         
      this.x += this.dx;
      this.y += this.dy;
      this.draw();
   }
   
}
var atomArray = [];
   for(var i=0; i < 3; i++)
{
   var x = Math.random() * (innerWidth - radius *2) + radius;
   var y = Math.random() * (innerHeight - radius *2) + radius;
   var dx = (Math.random() - 1) *5;
   var dy = (Math.random() - 1) *5;
   var radius = 30;
   atomArray.push(new Atom(x, y, dx, dy, radius));
}

function animate()
{
      requestAnimationFrame(animate);
      c.clearRect(0,0, innerWidth, innerHeight);
   
   for(var i=0; i < atomArray.length; i++)
   {
      atomArray[i].update();
   }
   
}

animate();
}


Ta część kodu wygląda mniej więcej w ten sposób. Dopiero zaczynam zabawę w tworzeniu jakiś animacji na stronie i będę wdzięczna za pomoc.
zjadka
Posty: 2
Dołączył(a): 12.03.2018

Re: Wyświetlanie elementu statycznego na canvie z animacją.

Post 12.03.2018, 20:55:27

zjadka
Posty: 2
Dołączył(a): 12.03.2018


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 5 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51503 zarejestrowanych użytkowników.
Najnowszy użytkownik: Robertven


Nasi użytkownicy napisali:

  • 937832 wiadomości
  • w 247504 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)