• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Canvas animacja bloków

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
143 wizyt
pytanie zadane 8 kwietnia w JavaScript przez niezalogowany

Witam ,mam taki problem bo muszę się dowiedzieć jak tworzyć w pętlach np 4 obiekty bo myślę że dodać kilka obiektów lae wolę być pewnym i potrzebuje pomocy z animacją w canvas'ie oto kod :

// pamiec                                                                 
const animacja = document.getElementById("ekran").value;

const magazyn = [];

// pamiec

// tworzenie 
  
  function nowy ()
{

  for (let i = 0; i < 4; i++) {
    const blok = {
    }
}
// tworzenie 

// animacja

// animacja 

 Postanowiłem sobie Tak posortować  komentarzami 

 

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>Zderzac hadronów!</title>
  <link rel="stylesheet" href="wyglad.css" type="text/css">
  <script src="zrodło.js"></script>
</head>
<body>
  
  <div id="com">
  
   <canvas width="400" height="300" id="ekran"></canvas>
    
    
  
    
  </div>
</body>
</html>

 

2 odpowiedzi

0 głosów
odpowiedź 8 kwietnia przez niezalogowany
function tworzenieObiektow() {
     const magazyn = [];
     for (let i = 0; i < 4; i++) {
         const blok = {
             // tutaj możesz dodać właściwości do obiektu blok
         };
         magazyn.push(blok); // dodajemy każdy nowo utworzony obiekt do tablicy magazyn}
     return magazyn;
}
0 głosów
odpowiedź 8 kwietnia przez VBService Ekspert (255,840 p.)
edycja 8 kwietnia przez VBService

IMO najpierw naucz się prawidłowo umieszczać obiekty na canvas a dopiero później zobacz jak się je animuje

nie

const animacja = document.getElementById("ekran").value;

tylko, bez value

// Pobieramy referencję do canvas-a
const ekran = document.getElementById("ekran");
const ctx_ekran = ekran.getContext("2d");

 

przykład

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <title>Zderzac hadronów!</title>
    <link rel="stylesheet" href="wyglad.css" type="text/css">
    <script src="zrodło.js"></script>
    <style>
      /* dla prezentacji */
      canvas {
        border: 1px solid black;
        margin: 1rem;
      }
    </style>
  </head>
  <body>

    <div id="com">   
      <canvas width="400" height="300" id="ekran"></canvas> 
    </div>

    <script>
      // Pobieramy referencję do canvas-a
      const ekran = document.getElementById("ekran");
      const ctx_ekran = ekran.getContext("2d");

      const magazyn_obiekty = [];

      for (let i=0; i<4; i++) {
        // Dodajemy obiekt do tablicy
        magazyn_obiekty.push({
          width: 50,
          height: 50,
          x: Math.max(0, Math.min(ekran.width - 50, parseInt(Math.random() * ekran.width))),   // losowa współrżedna x
          y: Math.max(0, Math.min(ekran.height - 50, parseInt(Math.random() * ekran.height))), // losowa współrżedna y
          color: '#' + (Math.random() * 0xFFFFFF << 0).toString(16) // losowy kolor
        });
      }

      // Czyścimy canvas
      ctx_ekran.clearRect(0, 0, ctx_ekran.width, ctx_ekran.height);

      // Rysujemy każdy obiekt z tablicy
      for (obiekt of magazyn_obiekty) {
        ctx_ekran.fillStyle = obiekt.color;
        ctx_ekran.fillRect(obiekt.x, obiekt.y, obiekt.width, obiekt.height);
      }
    </script>
  </body>
</html>

 

sprawdź: Canvas animacje

komentarz 8 kwietnia przez niezalogowany
Dobrze dziekuje za pomoc ;)

Podobne pytania

0 głosów
1 odpowiedź 317 wizyt
pytanie zadane 27 kwietnia 2021 w JavaScript przez Nabuchadonozor Gaduła (3,120 p.)
0 głosów
0 odpowiedzi 115 wizyt
0 głosów
1 odpowiedź 111 wizyt

93,096 zapytań

142,056 odpowiedzi

321,506 komentarzy

62,438 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...