Make An Animation
Using Canvas on HTML5
Hello
Guys !😏 Long time no see! it's a long time not post anything on my
blog… today I’m going to explain you about How to make animation using Canvas
on HTML5! 😆. Before explain how to make An Animation using canvas, let me tell you short description about HTML5 and Canvas. Enjoy and learn!💪
HTML5
HTML5 is the 5 version of HTML(Hypertext Mark up Languange) with new elements, attributes, and behaviors. It's launched on 2014 after the previous version HTML 4.01 on 2001. HTML5 serves as a markup language for structuring and displaying the contents of the World Wide Web.
<canvas>
<canvas> element is Used to review Graphic, objects on the website that generally using javascript script.<Canvas> is only a syntax for a draw, and to paint it you must use a script and several methods for drawing lines, boxes, circles, characters, and adding images.
Syntax of <canvas>
This is the syntax to show canvas tag.<canvas id="mycanvas" width="100" height="100"></canvas>
Okay! Now let me show you how to make An Animation using javascript. 😮
Make An Animation on Canvas
This is the code:
In this code i set my margin and padding to the default setting. I set my canvas attribute for the width is 500 and height 400, than i declare a new style attribute again to make a solid border 1 pixel and the color is green.<html><head><style>body {margin: 0px;padding: 0px;}</style></head><body><canvas id="myCanvas" width="500" height="400" style="border:1px solid #00ff00;"></canvas></body></html>
Next step, make a function to request animation frame and set timeout. This is the code:
<script>window.requestAnimFrame = (function(callback) {return window.requestAnimationFrame ||
function(callback) {window.setTimeout(callback, 1000 / 60);
In this code i call The window.requestAnimationFrame() to tell the browser to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. And i set timeout to schedules a function to execute in a given amount of time.};
Next, make a function for set and draw the object. This is the code & example :
In this function i input "context.rect(Rectangle.x, Rectangle.y, Rectangle.width, Rectangle.height);" to draw a rectangle, in here i choose black color fill and strokeStyle black (the border of rectangle).function drawRectangle(Rectangle, context) {context.beginPath();context.rect(Rectangle.x, Rectangle.y, Rectangle.width, Rectangle.height);context.fillStyle = '#000000';context.fill();context.lineWidth = Rectangle.borderWidth;context.strokeStyle = 'black';context.stroke();
After that, make a function for the animation movement. This is the code:
function animate(Rectangle, canvas, context, startTime) {
var time = (new Date()).getTime() - startTime;
var linearSpeed = 500;
var newX = linearSpeed * time / 1000;
if(newX < canvas.width - Rectangle.width - Rectangle.borderWidth / 2) {
Rectangle.x = newX;
}
context.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle(Rectangle, context);
requestAnimFrame(function() {
animate(Rectangle, canvas, context, startTime);
});
}In this code i set my the rectangle speed move linear to 500. "if(newX < canvas.width - Rectangle.width - Rectangle.borderWidth / 2)" in here i try to make the rectangle move using condition statement. If the condition is true the code will be request a new frame in different coordinate and it execute like a moving rectangle.
Next, this code is to set the rectangle form. This is the code:
var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');var Rectangle = {x: 0,y: 75,width: 100,height: 50,borderWidth: 5};
This code is to set the rectangle form like "var context = canvas.getContext('2d'); " codes it's mean i attribute the canvas context into 2 dimension. Than, i set the rectangle width 100,height 50,and the border width is 5.drawRectangle(Rectangle, context);
Last, make a set timeout and animation attribute to make the rectangle move and start animate. This is the code:
"var startTime = (new Date()).getTime();" this code is to get the rectangle start time from system. And this code "animate(Rectangle, canvas, context, startTime);" is to make animation code start.setTimeout(function() {var startTime = (new Date()).getTime();animate(Rectangle, canvas, context, startTime);}, 1000);</script></body></html>
this is the full code:
<html><head><style>body {margin: 0px;padding: 0px;}</style></head><body><canvas id="myCanvas" width="500" height="400" style="border:1px solid #00ff00;"></canvas><script>window.requestAnimFrame = (function(callback) {return window.requestAnimationFrame ||function(callback) {window.setTimeout(callback, 1000 / 60);};})();function drawRectangle(Rectangle, context) {context.beginPath();context.rect(Rectangle.x, Rectangle.y, Rectangle.width, Rectangle.height);context.fillStyle = '#000000';context.fill();context.lineWidth = Rectangle.borderWidth;context.strokeStyle = 'black';context.stroke();}function animate(Rectangle, canvas, context, startTime) {var time = (new Date()).getTime() - startTime;var linearSpeed = 500;var newX = linearSpeed * time / 1000;if(newX < canvas.width - Rectangle.width - Rectangle.borderWidth / 2) {Rectangle.x = newX;}context.clearRect(0, 0, canvas.width, canvas.height);drawRectangle(Rectangle, context);requestAnimFrame(function() {animate(Rectangle, canvas, context, startTime);});}var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');var Rectangle = {x: 0,y: 75,width: 100,height: 50,borderWidth: 5};drawRectangle(Rectangle, context);setTimeout(function() {var startTime = (new Date()).getTime();animate(Rectangle, canvas, context, startTime);}, 1000);</script></body></html>
The result :
Sorry using phone camera😜 my desktop recorder encountered an error.
Comments
Post a Comment