HTML5 Canvas Tag Cloud - TagCanvas

[심재운]

HTML5 Canvas Tag Cloud

TagCanvas is a Javascript class which will draw and animate a HTML5 canvas based tag cloud. I'm releasing it as open source under the LGPL v3 license. Below is an example.

TagCanvas  는 자바스크립트 클래스로 구현되어 있으며, 이는 html 5 canvas 로 메니메이션과 그림을 제공해 줍니다. 예제는 tag cloud 제품처럼 구현한 부분입니다. 오픈 소스이고, LGPL v3 입니다.

http://www.goat1000.com/tagcanvas.php

아래소스는 http://techdayskorea.azurewebsites.net/Conference/AllTags 여기서 이를 사용하고 있네요.

데모는 거기서...

<script src="/Scripts/jquery.tagcanvas.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        if (!$('#myCanvas').tagcanvas({
            textColour: '#ff0000',
            outlineColour: '#ff00ff',
            reverse: true,
            depth: 0.8,
            maxSpeed: 0.05
        }, 'tags')) {
            // something went wrong, hide the canvas container
            $('#myCanvasContainer').hide();
        }
    });
</script>

<h2>태그 구름</h2>

<div id="myCanvasContainer">
    <canvas width="300" height="300" id="myCanvas">
        현재 브라우저는 HTML5를 지원하지 않습니다.
    </canvas>
</div>

<div id="tags">
    <ul>
            <li><a href="/Conference/SessionsByTag?tag=.NET">.NET</a></li>
            <li><a href="/Conference/SessionsByTag?tag=ALM">ALM</a></li>
            <li><a href="/Conference/SessionsByTag?tag=AngularJS">AngularJS</a></li>
            <li><a href="/Conference/SessionsByTag?tag=ASP.NET%20MVC%205">ASP.NET MVC 5</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Azure">Azure</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Bootstrap">Bootstrap</a></li>
            <li><a href="/Conference/SessionsByTag?tag=CSS3">CSS3</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Dapper%20dot%20net">Dapper dot net</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Device">Device</a></li>
            <li><a href="/Conference/SessionsByTag?tag=EF%20Code%20First">EF Code First</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Entity%20Framework">Entity Framework</a></li>
            <li><a href="/Conference/SessionsByTag?tag=HTML5">HTML5</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Java">Java</a></li>
            <li><a href="/Conference/SessionsByTag?tag=jQuery%20Mobile">jQuery Mobile</a></li>
            <li><a href="/Conference/SessionsByTag?tag=NuGet">NuGet</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Service">Service</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Tool">Tool</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Unity">Unity</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Visual%20Studio">Visual Studio</a></li>
            <li><a href="/Conference/SessionsByTag?tag=VSO">VSO</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Windows%20Azure">Windows Azure</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Windows%20Phone">Windows Phone</a></li>
            <li><a href="/Conference/SessionsByTag?tag=Xamarin">Xamarin</a></li>
            <li><a href="/Conference/SessionsByTag?tag=%ED%95%9C%EA%B5%AD%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%86%8C%ED%94%84%ED%8A%B8">한국마이크로소프트</a></li>
    </ul>
</div>

[잠만보]

멋진데요^^ 이거 어디다 써먹을까??? ㅋㅋㅋ

[심재운]

알려주삼..ㅎㅎ

[순옥살]

ie9 까지박에 안되는군용 쩝..

[심재운]

HTML5 canvas based tag 이라고 명시되어 있찌용.~ ㅎ

[택이]

아득한 이름이군요 Tag Cloud ㅎㅎ

[심재운]

요즘 많이 안쓰죠? ㅎㅎ