Hirdetés

  2. Fórumok
  3. Szoftverfejlesztés
  4. JavaScript topic
Legfrissebb anyagok
PROHARDVER! témák
Mobilarena témák
IT café témák
GAMEPOD témák
  • PROHARDVER!
    Frissítve: 2014-02-25 10:20 Téma összefoglaló
    PROHARDVER!

    JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)

Új hozzászólás Aktív témák

  • hiperFizikus hiperFizikus senior tag
    #7582
    #7577 sztanozs
    Új Válasz
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    hiperFizikus
    hiperFizikus
    senior tag
    #7577 sztanozs
    #7577 sztanozs

    Csekkdiszáut:
    https://cloudinary.com/blog/creating_html5_animations
    https://medium.com/@huiwang339/html-canvas-animation-with-javascript-1956426287d3
    Plusz Canvas elejétől a végéig (az eleje végéig):
    https://www.html5canvastutorials.com/tutorials/html5-canvas-element/

    Köszönöm neked !
    Eddig jutottam . Ennek működni kéne, szépen villognia kéne, de azért nem működik mert sehogyanse nincs megoldva benne a paraméterátadás . Talán valami this.w01 = w01; kell bele, nem tudom ígyse működésre bírni . Hogyan kell a paraméterátdást megoldani benne, hogy szépen villogjon ? Persze a setInterval(frame, 3) 3-as száma helyet bármekkora számot tehettek .

    <!DOCTYPE html>
    <html>
    <head><title>pr 04; canvas animation</title></head>
    <body>
    <p><button onclick="start1()">Start 1</button></p> 
    <p><canvas id="idCanvas01" width="300" height="200" style="border:3px solid black;"></canvas></p>
    <script>
    function start1() {
        var canDim01 = document.getElementById("idCanvas01"); // megnyitja a canvas-t
        var w01 = canDim01.getContext("2d");
        w01.fillRect(50,100,80,40) ; // téglalapot ad meg
        var pos = 0; // számlálóhoz lesz
        var BL1 = true ; // billegtetéshez lesz
    // alert("1 ::" +"\n"+ pos +"\n"+ BL1);
        var id = setInterval(frame, 3); // az animáció motorja
    function frame() {
    //  this.w01 = w01; // talán valami ilyesmi hiányzik
        if (pos == 10) {
            clearInterval(id); // leállítja a motort
        } else {
    // alert("2 ::" + "\n" + pos +"\n" + BL1);
            pos++;  // számot változtat
            if (BL1) {
    // alert("31 ::" +"\n"+ pos +"\n"+ BL1);
                w01.fillStyle = "red" ; BL1 = false ; // színt változtat pirosra
            } else {
    // alert("32 ::" +"\n"+ pos +"\n"+ BL1);
                w01.fillStyle = "blue" ; BL1 = true ; // színt változtat kékre
            };
        };
    };
        w01.stroke(); // bezárja a canvas-t
    };
    </script>

    </body>
    </html>

    Ez egy másik kódból lett átvéve, evvel a másik kóddal nincs semmi bajom, csak azért tettem fel, hogy megnézhessétek :

    <!DOCTYPE html>
    <html>
    <head><title>pr 03; w3school animaton</title></head>
    <style>
    #container {
      width: 400px;
      height: 400px;
      position: relative;
      background: yellow;
    }
    #animate {
      width: 50px;
      height: 50px;
      position: absolute;
      background-color: red;
    }
    </style>
    <body>
    <p><button onclick="myMove()">Click Me</button></p> 
    <div id ="container"><!-- ez áll -->
      <div id ="animate"></div><!-- ez mozog -->
    </div>
    <script>
    function myMove() {
      var elem = document.getElementById("animate");   
      var pos = 0;
      var id = setInterval(frame, 5);
      function frame() {
        if (pos == 350) {
          clearInterval(id);
        } else {
          pos++; 
          elem.style.top = pos + "px"; 
          elem.style.left = pos + "px"; 
        }
      }
    }
    </script>
    </body>
    </html>

Új hozzászólás Aktív témák