Canvas animacja bloków

pytanie zadane 8 kwietnia w JavaScript przez Infos Użytkownik (650 p.)

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>

komentarz 8 kwietnia przez szpon12 Obywatel (1,220 p.)

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations

2 odpowiedzi

odpowiedź 8 kwietnia przez niezalogowany

odpowiedź 8 kwietnia przez VBService Ekspert (253,420 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