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");
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();
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();
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();
context.lineWidth = 3;
context.strokeStyle = "darkblue";
context.stroke();
context.fillStyle = "RoyalBlue";
context.fill();
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();
context.lineWidth = 3;
context.strokeStyle = "darkblue";
context.stroke();
context.fillStyle = "LightSkyBlue";
context.fill();
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();
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);
mainContext.fillStyle = "#F8F8F8";
mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
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>