Animated favicon using canvas
Canvicon class provides a way to animate your website's favicon using canvas. You can dynamically draw on canvas and update your favicon. It should work in all modern browsers except IE.
Package contains canvicon.js, canvicon.packed.js (packed javascript), canvicon.jquery.js (jquery plugin), and three example files: simple_example.html, example.html, and jquery_example.html to demonstrate class functionality.
Contents
Download
Example codes
<!DOCTYPE html> <html> <head> </head> <body> <canvas id='canvas' width='50px' height='50px' style='display: none;'></canvas> <script type="text/javascript" src="./canvicon.packed.js" ></script> <script type="text/javascript"> //get canvas and draw something var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillRect(0,0,50,50); //create canvas instance var c = new canvicon("canvas"); //update favicon c.update(); </script> </body> </html>
Live Examples
Canvas is hidden in this page. By pushing 'Draw random squares' random squares will be drawn on hidden canvas and rendered as favicon
Examples in action
Example scripts provided with package in action:
Method list
Constructor
| Method name | new canvicon(id, config); |
| Description | Create canvicon instance |
| Input parameters | string or HTML element id - id of canvas element or canvas HTML element itself json config - Json structure with configuration properties
|
| Example input | var c = new canvicon("mycanvas",
{
onerror: function(){alert("Favicon will not be animated");}
}); |
Update favion
| Method name | update() |
| Description | Update favicon to current canvas state |
Jquery usage
| Method name | canvicon(config) |
| Description | Canvicon jquery plugin usage |
| Input parameters | json config - Json structure with configuration properties
|
| Example | $("mycanvas").canvicon() |
Latest changes
None for nowYou may also be interested in:
Powered by BlogAlike.com
