Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Canvas HTML script Animate shapes

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 38
    Answer it

    I have created a Canvas and I am working with HTML and inside the HTML script tags I have created shapes that I want to move to animate. I want to add an animation to my Canvas. I Want to animate the Triangle and the Hexagon so that they rotate and fall into the Blue trashcan and disappear then the thank you text on bottom to appear. Here is my code:

    <!DOCTYPE html>
    
    <html>
    
    <head>
      
    <title>Simple Example</title>
      
       <style>
         
       canvas {
         
       border: #333 10px solid;
         
       }
       </style>
      
    </head>
    
    <body>  
    
    <canvas id="myCanvas" width="550" height="555px"></canvas>
      
      
       <script>
      
       var canvas = document.querySelector("#myCanvas");
       var context = canvas.getContext("2d");
      
       //hexagon
       context.beginPath();
       context.moveTo(10, 60);
       context.lineTo(40, 100);
       context.lineTo(80, 100);
       context.lineTo(110, 60);
       context.lineTo(80, 20);
       context.lineTo(40, 20);
       context.closePath();
       context.lineWidth = 1;
       context.strokeStyle = "#000000";
       context.fillStyle = "#FF0000";
       context.fill();
       context.stroke();
       context.closePath();
      
      
      
    
       //triangle
       context.beginPath();
       context.moveTo(515, 110);
       context.lineTo(400, 110);
       context.lineTo(450, 20);
       context.closePath();
       context.lineWidth = 2;
       context.strokeStyle = "#000000";
       context.fillStyle = "#FFFF00";
       context.fill();
       context.stroke();
       context.closePath();
      
       //can
       context.beginPath();
               context.arc(350, 133, 200, 0.35 * Math.PI, 0.65 * Math.PI, false);
               context.lineTo(259,428);
               context.arc(350, 250, 200, 0.65 * Math.PI, 0.35 * Math.PI, true);
               context.closePath();      
               // the outline
               context.lineWidth = 3;
               context.strokeStyle = "darkblue";
               context.stroke();   
               // the fill color
               context.fillStyle = "RoyalBlue";
               context.fill();
              
              
               //can top
               context.beginPath();
               context.arc(350, 485, 200, 1.35 * Math.PI, 1.65 * Math.PI, false);
               context.arc(350, 133, 200, 0.35 * Math.PI, 0.65 * Math.PI, false);
               context.closePath();
               // the outline
               context.lineWidth = 3;
               context.strokeStyle = "darkblue";
               context.stroke();   
               // the fill color
               context.fillStyle = "LightSkyBlue";
               context.fill();  
              
               //recycle
               context.font = "35px Arial, Arial, sans-serif";
               context.fillStyle = "darkblue";
               context.textAlign = "left";
               context.rotate( 45 * Math.PI / 180);
               context.fillText("Please recycle", 250, -70);
               context.resetTransform();  
              
               //thanks text // I need this text visible only after the shapes disapper into the trash can
               context.font = "18px Helvetica, Arial, sans-serif";
               context.fillStyle = "black";
               context.textAlign = "center";
               context.fillText("Thank you very much!", 350, 475);
      
    
       </script>
      
    </body>

 0 Answer(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: