Click here to Skip to main content
15,041,788 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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></html>


What I have tried:

I have this circle moving and I tired to include this on my other shapes but with no luck.

<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8" />
	<title>OC</title>
	<style>
		canvas {
			border: #333 10px solid;
		}
	</style>
</head>
<body>
	
	<canvas id="myCanvas" width="750px" height="550px">
	
	</canvas>
	
	<script>
		
		var mainCanvas = document.querySelector("#myCanvas");
		var mainContext = mainCanvas.getContext("2d");
		
		var canvasWidth = mainCanvas.width; 
		var canvasHeight = mainCanvas.height;
		
		var xPos = -500;
		
		function drawCircle() {
		mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
		
		
		//color background
		mainContext.fillStyle = "#F8F8F8";
		mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
		
		//draw circle
		mainContext.beginPath();
		
		context.moveTo(515, 110);
   context.lineTo(400, 110);
   context.lineTo(450, 20);
		mainContext.closePath();
		
		mainContext.fillStyle = "#FFCC00";
		mainContext.fill();
		
		mainContext.lineWidth = 10;
		mainContext.strokeStyle = "#DCB001";
		mainContext.stroke();
		
		xPos += 5;
		if (xPos > 1000) {
		   xPos = -500; 
		  }
		
		requestAnimationFrame(drawCircle);
		}
		drawCircle();
		</script>

</body>
</html>
Posted
Comments
Gerry Schmitz 14-Apr-21 1:10am
   
One animates by producing a series of frames over time; e.g. loop; timer.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900