Hello Friends, Today I am gonna share Javascript Code. This code is about creating Countdown in Html using Canvas Tag. The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.
Countdown in HTML Canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE HTML> <html> <head> <style> * { margin: 0px; padding: 0px; } html, body { width: 100%; height: 100%; } /* Remove Scroll Bar */ canvas { display:block; } </style> </head> <body> <canvas id="myCanvas"></canvas> <script> //Draw Counter function counter(ctx, num) { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.font="75px Comic Sans MS"; ctx.fillStyle = "red"; ctx.textAlign = "center"; ctx.fillText(""+num, canvas.width/2, canvas.height/2); if(num == 0){ clearInterval(intvl); } } // Resize canvas on resize of window window.addEventListener('resize', function(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight; }, false); var canvas = document.getElementById("myCanvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx=canvas.getContext("2d"); var num = 10; //Start Countdown Timer var intvl = setInterval(function(){counter(ctx,num--);},1000); </script> </body> </html> |
Output
References
https://en.wikipedia.org/wiki/Canvas_element
http://www.w3schools.com/canvas/
http://jsfiddle.net/jaredwilli/qFuDr/
Thanks for Stopping By
Please Share if You like it
Comments