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)