Create Flash like tag cloud from HTML5'tag Canvas
1.In head tag of your html page use follwing code
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript">
window.onload = function() {
try {
TagCanvas.Start('myCanvas');
} catch(e) {
// in Internet Explorer there is no canvas!
document.getElementById('myCanvasContainer').style.display = 'none';
}
};
</script><script type="text/javascript" src="tagcanvas.js"></script>
<script type="text/javascript" src="jqueryTagcanvas.js"></script>
dont worry i'll provide u needed .js files link ;) :) download files from here
2. in body tag use following code
<canvas width="250" height="250" id="myCanvas">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
<ul>
<li><a href="http://www.linkedin.com/in/sarveshkushwaha" target="_blank"> Linkedin</a></li>
<li><a href="https://www.facebook.com/SarveshKushwaha" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/#!/SSSSTUD" target="_blank">Twitter</a></li>
<li><a href="https://plus.google.com/u/0/106654246555195291469/" target="_blank">Google+</a></li>
<li><a href="https://www.xing.com/profile/Sarvesh_Kushwaha" target="_blank">Xing</a></li>
<li><a href="http://www.researchgate.net/profile/Sarvesh_Kushwaha/" target="_blank">Researchgate</a></li>
<li><a href="http://www.behance.net/sarveshkushwaha" target="_blank">Behance</a></li>
<li><a href="http://zerply.com/sarveshkushwaha" target="_blank">Zerply</a></li>
<li><a href="http://pulse.yahoo.com/_YGITOM7UQEIHIJSFFGIE2TDOQE" target="_blank">yahoo</a></li>
<li><a href="http://sarveshkushwaha.blogspot.com" target="_blank">Blog</a></li>
<li><a href="http://sarveshkushwaha.500px.com" target="_blank">500px</a></li>
</ul>
</canvas>
you can change the size of it and you can change the speed of text which are moving .you can use images as an alternative of text , u can change the color .... ooooooofffff i mean you can customize it the way you want ;) ;) :P :P .
nice article very helpful .
ReplyDeletehow to increase the font size
ReplyDeletehow to increse the font size
ReplyDeleteyeah you can change the size of font , do it from javascript i m using . there is option to change the font size .
ReplyDeletegenial sos un genio !!!
ReplyDeleteThanks Mau
ReplyDeleteThis comment has been removed by the author.
ReplyDelete