This article demonstrates how can we draw the grid lines on the HTML 5 canvas object. You can See the below demo in which you can reset the thickness and size of the grid lines from the drop down options. Continue reading “HTML 5: Draw the Grid lines on the Canvas”
Tag: Animation in HTML5
In HTML 5, there are many techniques to create the animation on your web page such as Canvas CSS3, SVG and WebGL. The element that allows us to build the dynamic graphs, 2D shapes, bitmap images and animation using the JavaScript.
See the Demo and Source code A Simple Example to create the animation in HTML 5
Draw the Car and Move forward and backward with arrow keys
Draw the Car and Move forward and backward with arrow keys Continue reading “Draw the Car and Move forward and backward with arrow keys”
Text animation small to its full size in HTML5
See the Demo.
<html> <head> <title>Text small to big Animation</title> <script type="text/javascript"> var can, ctx, step = 10, steps = 50; delay = 20; function init() { can = document.getElementById("MyCanvas"); ctx = can.getContext("2d"); ctx.fillStyle = "blue"; ctx.font = "10pt Helvetica"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; TextSmallToBig(); } function TextSmallToBig() { step++; ctx.clearRect(0, 0, can.width, can.height); ctx.save(); ctx.translate(can.width / 2, can.height / 2); ctx.font = step + "pt Helvetica"; ctx.fillText("Welcome", 0, 0); ctx.restore(); if (step < steps) var t = setTimeout('TextSmallToBig()', 20); } </script> </head> <body onload="init();"> <canvas id="MyCanvas" width="300" height="200"> This browser or document mode doesn't support canvas object</canvas> </body> </html>
Text fade in fade out effect in HTML5
The following code example shows the text fade in and fade out effect on the canvas in HTMl5. Continue reading “Text fade in fade out effect in HTML5”
Text Animation in HTML5
You can create text marquee (i.e. scrolling text left to right and right to left on the canvas) and can create a text animation such as text rotation, text highlight etc. Continue reading “Text Animation in HTML5”
Text rotation and scale in HTML5
The following code example demonstrates how to rotate and scale text on the canvas in HTML5. Continue reading “Text rotation and scale in HTML5”
Scrolling text left to right in HTML5
The Following example demonstrates how to scroll the text left to right on the canvas in HTML5. The example does not use any CSS for marquee text. Try the example: Continue reading “Scrolling text left to right in HTML5”
Scrolling text right to left in HTML5
The Following example gives you an idea to scrolling the text on the canvas in HTML 5. The example uses the save(), translate() and restore() methods to animate the text. Continue reading “Scrolling text right to left in HTML5”