If at first you don't succeed, call it version 1.0

Contact Me

Sarvesh Kushwaha
Email : sarveshkushwaha@outlook.com

Total Pageviews

Powered by Blogger.

Sunday 8 April 2012

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 . 


one more thing i have forgot to tell ,  i have used <iframe> tag in blog , so you can use <iframe> tag in your blog as well . keep experimenting ;)

7 comments:

  1. how to increase the font size

    ReplyDelete
  2. how to increse the font size

    ReplyDelete
  3. yeah you can change the size of font , do it from javascript i m using . there is option to change the font size .

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete