1 Reply Latest reply on Dec 4, 2012 5:24 AM by FeZEC

    Animation problem any help is appreciated

    FrederickjohnWright

      Hi Guys an Gals

      Could anyone help me sort this simple animation attempt ?

      It should draw a simple rocket 'launching'

      Regards

      Frederick

       

      <!DOCTYPE html
      <head>

      <script>
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");

      </script>

      </head>
      <body>
      <canvas id="myCanvas" width="200" height="700"
      style="border:1px solid #000000;">This text is displayed if your browser does not support HTML5 Canvas.

      </canvas>

      <script>
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");

       
      function draw(x,y){
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      var y = 600;

      for (var y=600; y>10; y-=60) {
      ctx.clearRect(0,0,200,700);

      ctx.fillStyle="#000000";
      ctx.fillRect(80,y,40,60);
      ctx.moveTo(80,y);
      ctx.lineTo(100,y-50);
      ctx.lineTo(120,y);
      ctx.closePath();

      ctx.moveTo(80,y+40);
        ctx.lineTo(70,y+80);
         ctx.lineTo(70,y+120);
          ctx.lineTo(80,y+120);
        ctx.closePath();
       
        ctx.moveTo(120,y+40);
        ctx.lineTo(130,y+80);
        ctx.lineTo(130,y+120);
        ctx.lineTo(120,y+120);
        ctx.closePath();
       
        ctx.moveTo(98,y+40);
        ctx.lineTo(98,y+120);
        ctx.lineTo(104,y+120);
        ctx.lineTo(104,y+40);
        ctx.closePath();
        ctx.fillStyle = "#8ED6FF";
           ctx.fill();
           ctx.strokeStyle = "#8ED6FF";
      ctx.stroke();

        alert(y);

      }
      }
       
      </script>
      <button onclick="draw(0,0)">Draw</button>
      </body>
      </html>

        • 1. Re: Animation problem any help is appreciated
          FeZEC Adobe Community Professional

          The problem is you're using a while loop. Which you've noticed is immediate which is why you use the alerts. It steps through the while loop. But using loops is not the answer. You need a timer, which will do the pausing for you. Essentially you are looking to make frames occur within a given amount of time.  i have set the animation to 50 milliseconds. i would not go lower than that.           

           

          c = document.getElementById("myCanvas");
          ctx = c.getContext("2d");
          y = 600;
          interval = null;
          function draw(x, y) {
              y = 600;
              alert(this);
              if (interval) {
                  clearInterval(interval);
              }
              interval = setInterval(reDraw, 50);
          }
          function reDraw() {
              ctx.clearRect(0, 0, 200, 700);
              if (y > 10) {
                  y -= 60;
              } else {
                  return;
              }
               ctx.fillStyle = "#000000";
              ctx.fillRect(80, y, 40, 60);
              ctx.moveTo(80, y);
              ctx.lineTo(100, y - 50);
              ctx.lineTo(120, y);
              //ctx.closePath();
               ctx.moveTo(80, y + 40);
              ctx.lineTo(70, y + 80);
              ctx.lineTo(70, y + 120);
              ctx.lineTo(80, y + 120);
              //ctx.closePath();
               ctx.moveTo(120, y + 40);
              ctx.lineTo(130, y + 80);
              ctx.lineTo(130, y + 120);
              ctx.lineTo(120, y + 120);
              // ctx.closePath();
               ctx.moveTo(98, y + 40);
              ctx.lineTo(98, y + 120);
              ctx.lineTo(104, y + 120);
              ctx.lineTo(104, y + 40);
              ctx.closePath();
              ctx.fillStyle = "#8ED6FF";
              // ctx.fill();
              ctx.strokeStyle = "#8ED6FF";
              //  ctx.stroke();
          }